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.

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

Config Styles

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