jQuery: il modo più semplice per creare uno slideshow di contenuti

In questo articolo presenterò il modo più semplice per implementare uno slideshow di contenuti ciclico con jQuery, ossia quello di utilizzare una classe CSS che fungerà da segnaposto per contrassegnare la slide corrente. Vediamo insieme i dettagli.

Partiamo da questa struttura HTML:

<div id="slideshow">
	<div class="slide current">...</div>
	<div class="slide"></div>
	<div class="slide"></div>
</div>

Assegniamo i seguenti stili CSS:

#slideshow {
    width: 40em;
    margin: 2em auto;
    border: 5px double #ccc;
    background: #eee;
    box-shadow: 1px -1px 2px #ddd, -1px 1px 2px #ddd;
    height: 20em;
}

#slideshow div.slide {
    width: 100%;
    height: 100%;
    display: none;
}

h3 {
    font-size: 1.8em;
    text-align: center;
    margin-top: 1em;
}

p {
    line-height: 1.3;
    width: 70%;
    margin: 0.4em auto 0 auto;
    font: 90% Arial, sans-serif;
}

#slideshow div.current {
    display: block;
}​

Tutte le slide hanno display: none ma la classe current ha display: block. Con jQuery dobbiamo solo verificare che l'indice corrente delle slide sia arrivato o meno alla fine del set di slide. Quindi possiamo utilizzare la nostra classe CSS per mostrare o nascondere le slide:

function autoSlide() {
    var nextidx = (parseInt($('#slideshow .current').index() + 1) == $('#slideshow .slide').length) ? 0 : parseInt($('#slideshow .current').index() + 1);
    $('#slideshow .current').fadeOut('slow', function() {
        $(this).removeClass('current');
        $('#slideshow .slide').eq(nextidx).fadeIn('slow', function() {
            $(this).addClass('current');
        });
    });
}

setInterval(autoSlide, 2000);

Potete visionare l'esempio finale in questa pagina.