Demo 3: Image slider with vertical thumbnails

This demo shows how the Ninja Slider and the jQuery Thumbnail Slider can work together to show the details of the thumbs. The large image slider (Ninja Slider) will resopnse to the auto advancing of the thumbnail carousel, and clicking the arrow nav buttons of the large image slider will also update the thumbnail carousel. They are working in sync with each other.

Visit jQuery Slider to download this demo
Another demo similar to this one: Image gallery with horizontal thumbs

Markup

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

The Thumbnail Slider can use smaller thumbnails, or just as this demo did, use the same large images of the Ninja Slider. In either case the thumbnails will be scaled to the size specified by the thumbWidth and thumbHeight option in the thumbnail-slider.js.

Config JavaScript

ninja-slider.js var nsOptions = { .... autoAdvance: false, //Let the Thumbnail Slider to drive the scrolling so that the two sliders are in sync. keyboardNav: true, before: function (currentIdx, nextIdx, manual) { if(manual && typeof mcThumbnailSlider!="undefined") mcThumbnailSlider.display(nextIdx);}, //Clicking the arrow buttons or press the keyboard arrow keys will drive the Thumbnail Slider }
thumbnail-slider.js var thumbnailSliderOptions = { .... showMode: 2, autoAdvance: true, //If true, the showMode cannot set to 1 or 4 as some thumbs under //these show modes will be skipped over while scrolling. selectable: true, //Highlight the active thumbnail thumbWidth: "140px", thumbHeight: "70px", keyboardNav: false, //use Ninja Slider's keyboaredNav instead before: function (currentIdx, nextIdx, manual) { if (typeof nslider != "undefined") nslider.displaySlide(nextIdx); } //Let Ninja Slider to be driven by the thumbs slider }

Config Styles

The style="float:left;" has been added to the markup of both sliders so that they will align on the same line.
The Ninja Slider is styled as: #ninja-slider { width:800px; } It also has the script option: var nsOptions = {aspectRatio:"2:1"} So its height will be 400px. That is why we have also configured the Thumbnail Slider as: #thumbnail-slider { height:400px; }

License

Please note: You need a Ninja Slider license instead of the jQuery slider license when using this template. Apply the acquired license to both the Ninja Slider and the jQuery Slider

More Info

Another similar template: Image gallery with horizontal thumbs
Full documentation: jQuery Slider
Questions & Answers: Posts in the forum