jQuery: creare un carousel basico

In jQuery per carousel si intende uno slider ciclico che compie un giro completo su un set di elementi per poi ricominciare dal primo (e così via). Esistono vari tipi di carousel, ma forse quello più semplice da implementare è un carousel che presenta un semplice effetto di dissolvenza e assolvenza sugli elementi. In questo articolo vedremo come implementare un carousel basico.

Partiamo dalla seguente struttura HTML:

<ul id="carousel">
    <li>
        <div>
            First
        </div>
    </li>
    <li>
        <div>
            Second
        </div>
    </li>
    <li>
        <div>
            Third
        </div>
    </li>
</ul>​

Gli elementi del set dovranno essere inizialmente nascosti e mostrati solo aggiungendo una determinata classe CSS che si alternerà sull'elemento corrente ad ogni ciclo del carousel:

#carousel {
    width: 500px;
    height: 300px;
    margin: 2em auto;
    border: 0.5em double #bbb;
    overflow: hidden;
}

#carousel li {
    float: left;
    width: 500px;
    height: 300px;
    display: none;
}

#carousel li div {
    width: 500px;
    height: 300px;
    line-height: 300px;
    background: #eee;
    text-align: center;
    font-size: 2em;
}

#carousel li.carousel-item-visible {display: block;}
​

Con jQuery dobbiamo individuare l'elemento corrente e mostrarlo con un effetto di assolvenza usando un timer ciclico. Useremo il metodo queue() per creare una coda di animazioni che utilizzeranno l'assolvenza e la dissolvenza sugli elementi:

var Carousel = {

    run: function() {

        var carousel = $('#carousel');
        carousel.find('li').first().addClass('carousel-item-visible');
        window.setInterval(function() {

            var current = carousel.find('li.carousel-item-visible'),
                next = (carousel.find('li.carousel-item-visible').next().length > 0) ? carousel.find('li.carousel-item-visible').next() : carousel.find('li').first();

            next.fadeIn('slow').addClass('carousel-item-visible').queue(function() {
                current.fadeOut('slow').removeClass('carousel-item-visible');
                next.dequeue();
            });

        }, 3000);


    }

};

Carousel.run();​

Come si può notare, l'elemento corrente ha la classe CSS carousel-item-visible. L'elemento successivo viene trovato verificando il metodo next() dell'elemento corrente. In alternativa si utilizza il primo elemento del set (quando il metodo next() è giunto alla fine del set).

Potete visionare l'esempio finale in questa pagina.