jQuery: vertical product slider a la Binpress

by gabrieleromanato

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>

CSS

#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(https://lh6.googleusercontent.com/-7iCvQKWks_c/T_6D4_BkR1I/AAAAAAAABC4/DIlTJOhmvOc/s170/arrow-label2.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;
}

JavaScript

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();