Demo 2: Image slider with vertical thumbnails

You may have seen the Flickr-style Slideshow that synchronizes an image slider with a horizontal thumbnail slider.

Here is another example of a synchronized image slider with a vertical thumbnail slider.

HTML

<div id="ninja-slider" style="float:left;">
    (...ommitted for brevity)
</div>
<div id="thumbnail-slider" style="float:left;">
    (...ommitted for brevity)
</div>

JavaScript

Please refer to the option settings in the Flickr-style Slideshow. The configuration is almost identical to this demo, except that the showMode of this demo is set to 2 instead of 3.

Styles

• The style="float:left;" has been added to the markup of both sliders so they align on the same line.
• The Ninja Slider is styled as: #ninja-slider { width:800px; } It also uses the script option: var nsOptions = {aspectRatio:"2:1"} This sets its height to 400px. For consistency, the Thumbnail Slider is also configured as: #thumbnail-slider { height:400px; }