JavaScript: creare uno slider di contenuti senza jQuery

In questo articolo vedremo come creare uno slider di contenuti usando solo JavaScript ed i CSS. Come vedremo non è un compito affatto complesso.

Partiamo da questa struttura HTML:

<div id="content">
	<p>...</p>
	<p>...</p>
	<p>...</p>
	<!-- continua -->
</div>

Registriamo una transizione sugli elementi posizionati a livelli uno sull'altro:

#content {
	position: relative;
	width: 100%;
	height: 12em;
	background: #eee;
}

p {
	transition: all 600ms ease-in;
	position: absolute;
	top: 0;
	left: 0;
	padding: 2.5em 1em 1em 1em;
	margin: 0;
}

Quindi creiamo due classi CSS per mostrare e nascondere gli elementi.

.hidden {
	opacity: 0;
}

.visible {
	opacity: 1;
}

Ora il codice JavaScript:

document.addEventListener( "DOMContentLoaded", function() {
	var p = document.querySelectorAll( "p" );
	var nav = document.createElement( "nav" );
	nav.id = "pages";

	document.body.appendChild( nav ); // Creiamo la navigazione

	
	// Popoliamo la navigazione e nascondiamo gli elementi eccetto il primo
	for( var j = 0; j < p.length; j++ ) {
		var pEl = p[j];
		pEl.setAttribute( "id", "para-" + j );
		
		var a = document.createElement( "a" );
		a.setAttribute( "href", "#para-" + j );
		var t = document.createTextNode( j + 1 );
		a.appendChild( t );
		document.getElementById( "pages" ).appendChild( a );
		
		if( j > 0 ) {
			pEl.className = "hidden";
		}
	}
	
	var pages = document.querySelectorAll( "#pages a" );
	
	// Evento click sui link di navigazione
	
	for( var k = 0; k < pages.length; ++k ) {
		var page = pages[k];
		page.addEventListener( "click", function( e ) {
			var link = this;
			e.preventDefault();
			var href = link.getAttribute( "href" );
			var target = document.querySelector( href );
			target.className = "visible";
			link.className = "current";
			for( var l = 0; l < p.length; ++l ) {
				var _p = p[l];
				if( _p !== target ) {
					_p.className = "hidden";
				}
			}
			for( var m = 0; m < pages.length; ++m ) {
				var _a = pages[m];
				if( _a !== link ) {
					_a.className = "";
				}
			}
			
		}, false );
	}

});