Demo 2 - Menucool Image Slider with thumbnails

Demos:     1   2   3   4   5   6   7

• 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.

• By default, the thumbnailsWrapperId property in the JavaScript is also configured as "thumbs". This makes the thumbnails work synchronously with the main slider.
• When each thumbnail (<div class="thumb"> ... </div>) is hovered, its style is set by both thumb and thumb-on class (class="thumb thumb-on")
• Tweak the style of the #thumbs, .thumb, and .thumb-on in the js-image-slider.css file for different thumbnail layouts and styles: horizontal, vertical, in grids, ...
• If there are many thumbnails and the containing block does not have enough room to show them, you can make the slider work together with our jQuery Slider. See jQuery Slideshow.
• This demo has the advanced feature (thumbnails support). The thumbnails will not work properly on the production server without a valid license.