Demo 1 Demo 2 Demo 3 Demo 4 Demo 5 Demo 6

Demo 1: Menucool jQuery Slider

This demo contains two thumbnail sliders: one is horizontal and another is vertical.

If you use this demo's source code, and you only need one slider, you should remove the other slider from the source code.

For example, when you only need the horizontal slider, you should:

1. HTML:

   Remove the markup of the unused slider:

   Before update:

   <div style="float:left;padding-top:98px;">
       <div id="thumbnail-slider">...</div>
   </div>
   <div style="float:left;padding-left:100px;">
       <div id="thumbs2">...</div>
   </div>
   <div style="clear:both;"></div>

   After update:

   <div id="thumbnail-slider">...</div>

2. CSS:

   Remove the stylesheet: <link href="1/thumbs2.css" rel="stylesheet" />

3. JavaScript:

   Remove the following settings in the thumbnail-slider.js:

   var thumbs2Op = { ... };
   var mcThumbnailSlider = new ThumbnailSlider(thumbnailSliderOptions);//Note: this line is still needed.
   var mcThumbs2 = new ThumbnailSlider(thumbs2Op);

Full documentation of the image slider.