jQuery: slider verticale di prodotti a la Binpress

Binpress presenta un interessante slider verticale di prodotti in evidenza nella sua homepage. In questo articolo vedremo come ricreare il funzionamento base di questo slider con jQuery.

Partiamo da questa struttura HTML:

<ul id="slider">
    <li>
        <a href="#">Lorem ipsum dolor</a>
        <div class="product">
            <h3>Title</h3>
            <p>Lorem ipsum dolor sit amet et ideo autem</p>
         </div>
   </li>
   <li>
        <a href="#">Lorem ipsum dolor</a>
        <div class="product">
            <h3>Title</h3>
            <p>Lorem ipsum dolor sit amet et ideo autem</p>
         </div>
   </li>
   <li>
        <a href="#">Lorem ipsum dolor</a>
        <div class="product">
            <h3>Title</h3>
            <p>Lorem ipsum dolor sit amet et ideo autem</p>
         </div>
   </li>
            
</ul>

Aggiungiamo gli stili CSS nascondendo inizialmente tutti i box dei prodotti:

#slider {
    width: 340px;
    margin: 2em auto;
}

#slider li {
    width: 100%;
    overflow: hidden;
    margin-bottom: 1em;
    height: 5em;
}

#slider li a {
    float: left;
    width: 170px;
    height: 27px;
    line-height: 27px;
    text-decoration: none;
    text-align: center;
    color: #069;
}

#slider li a.selected {
    background: url(arrow-label.png) no-repeat;
    color: #fff;
}

#slider li div.product {
    float: right;
    width: 150px;
    background: #ccc;
    border-radius: 8px;
    display: none;
    max-height: 5em;
}

#slider li div.product h3 {
    font-size: 1.2em;
    background: #000;
    color: #fff;
    border-radius: 8px 8px 0 0;
    padding: 3px;
    text-align: center;
}

#slider li div.product p {
    padding: 5px;
}

La classe speciale selected verrà assegnata al link corrente da jQuery. Con jQuery dobbiamo creare un carosello ciclico mettendo in pausa il loop quando si lascia il mouse su un link:

var ProductSlider = new function() {

    var slider = document.getElementById('slider'),
        products = $('div.product', slider),
        links = $('a', slider),
        len = products.length,
        index = -1,
        timer = null;

    var doSlide = function() {

        timer = setInterval(function() {

            index++;

            if (index == (len - 1)) {

                index = -1;
            };

            var link = links.eq(index);
            var product = link.next();
            var otherLinks = link.parents('#slider').find('a').not(link);
            var otherProducts = product.parents('#slider').find('div.product').not(product);

            link.addClass('selected');
            otherLinks.removeClass('selected');
            product.show();
            otherProducts.hide();

        }, 2000);

    };

    var stopSlide = function() {

        links.hover(function() {
            clearInterval(timer);
            timer = null;

        }, function() {

            doSlide();

        });

    };

    this.init = function() {

        doSlide();
        stopSlide();
    };

}();

ProductSlider.init();​

Potete visionare l'esempio finale in questa pagina.