jQuery: vertical slideshow tutorial: building a carousel for featured products

Vertical carousels (aka vertical slideshows) are just like any other jQuery slideshows except for the fact that the CSS property involved in the main animation is the top property. A series of images, showing featured products, are contained within a wrapper whose visible area has an height set to display only one image at time. The inner wrapper, instead, has its height set to the overall heights of all the images. The images, in turn, have the declaration position: relative so that we can easily retrieve their vertical offset and use such offset to make their container slide vertically. Easy enough.

We start with the following markup structure:

<div id="products">
    
    <div id="products-wrapper">
        <div id="products-container">
        	<img src="1.jpg" alt=""/>
        	<img src="2.jpg" alt=""/>
        	<img src="3.jpg" alt="" />
        	<img src="4.jpg" alt=""/>
        </div>
    </div>
        
    
    <div id="thumb-nav">
        <a href="#" data-rel="0"><img src="1-thumb.jpg" alt=""/></a>
        <a href="#" data-rel="1"><img src="2-thumb.jpg" alt=""/></a>
        <a href="#" data-rel="2"><img src="3-thumb.jpg" alt=""/></a>
        <a href="#" data-rel="3"><img src="4-thumb.jpg" alt=""/></a>
    </div>
</div>

Each navigation link has a custom data-rel attribute whose value corresponds to the index of the attached product so that we can use it with the jQuery's .data() method combined with the .eq() method.

Now our CSS styles:

#products {
    width: 100%;
    margin: 2em auto;
    max-width: 600px;
}

#products-wrapper {
    height: 200px;
    overflow: hidden;
    margin: 0 auto;
    width: 400px;
    position: relative;
}

#products-container {
    position: relative;
}

#products-wrapper img {
    display: block;
    margin: 0 auto;
    position: relative;
}

#thumb-nav {
    height: 100px;
    text-align: center;
    border-top: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
    margin-top: 1.5em;
    background: #eee;
}

#thumb-nav img {
    display: inline-block;
    margin-right: 0.5em;
}

Each product image is 200 pixels tall in its full version, so we need to have an outer container whose height is exactly equal to 200 pixels. Then we use the overflow property to display only one image. Finally, we use relative positioning to allow jQuery to correctly calculate the top offset of each image via the .position() method.

With jQuery we first need to dynamically set the overall height of the innermost container so that it can properly host the images. Then we attach a sliding action to each navigation link:

var Slideshow = {

    setHeight: function() {

        var $img = $('img', '#products-wrapper');
        var total = 200 * $img.length;

        $('#products-container').height(total);



    },

    slide: function() {

        $('a', '#thumb-nav').on('click', function() {

            var $a = $(this);
            var $image = $('img', '#products-wrapper').eq($a.data('rel'));

            $('#products-container').animate({
                top: -$image.position().top
            }, 500, 'easeOutBounce');



        });

    },

    init: function() {
        this.setHeight();
        this.slide();
    }

};

Slideshow.init();​

You can see the demo on this page.