Demo 2 - Image Slider with Thumbnails

You can download the source code of this slider from the JavaScript Image Slider page.

As shown by the demo, the thumbnails change their active status while the main image slides, and the main slider will switch to the corresponding image when a thumbnail is clicked.

• The thumbnails' HTML markup: <div id="thumbs"> <div class="thumb"> (any HTML content) </div> <div class="thumb"> (any HTML content) </div> ... ... </div> You can put any HTML content inside each <div class="thumb"> </div> element. The number of thumbnails and the number of the main slides should be the same.
• Set the thumbnailsWrapperId option in the js-image-slider.js to be "thumbs". Then the thumbnails will change their active status synchronously with the main slider.
• The style of each thumbnail (<div class="thumb"> ... </div>) is defined by the #thumbs, thumb and thumb-on classes in the js-image-slider.css
• If there are lots of thumbnails and the containing block does not have enough room to show them, you can consider showing the thumbnails in multiple columns or rows by tweaking the js-image-slider.css (Example: Place thumbnail columns around slider both sides). Another solution is to make the slider work together with Menucool Thumbnail Slider. Please visit Image Slideshow with horizontal thumbnails and Image Slideshow with vertical thumbnails.
• This demo requires a JavaScript Image Slider license for supporting the thumbnails features.