Thumbnail Slider

Some description
Sled dashed down
Read in Leisure



AnimationType:
Circular:
AutoScroll:
ScrollInterval: milliseconds
ScrollDuration: milliseconds
 
Demos:     1   2   3   4

Notice: The Thumbnail Slider has been rewritten and upgraded to jQuery Slider. This is the legacy version of the Thumbnail Slider.

This thumbnail slider has also been rewritten and converted into plain JavaScript version.

  • Pure Javascript (10kb)
  • Built in navigation
  • Simple markup. Easy to customize such as adding image links, descriptions
  • Each frame can have either single or multiple images
  • Support varying width of images if multiple thumbnails are displayed in each frame
  • Display image in-sync with thumbnail images
  • Supported by all major browsers cross browser support
    IE 6.0+, Firefox 1.5+, Chrome 1.0+, Safari 3+, Opera 9.0+, Netscape 7.0+
  • Price: US$20.00 per site. Buy Now

Source Code of Demo 1

HTML:

<head> <link href="r/1/slider.css" rel="stylesheet" type="text/css" /> <script src="prod/thumbnail-slider.js" type="text/javascript"></script> ... ... </head> <body> ... ... <div id="imageSliderWrapper"> <div id="imageSlider"> <div> <img src="r/1/thumbnail-slider-1.jpg" alt="" /> <div class="descBg"></div> <div class="description">Some description</div> </div> <div> <img src="r/1/thumbnail-slider-2.jpg" alt="" /> </div> <div> <img src="r/1/thumbnail-slider-3.jpg" alt="" /> </div> <div> <img src="r/1/thumbnail-slider-4.jpg" alt="" /> <div class="descBg"></div> <div class="description">Sled dashed down</div> </div> <div> <img src="r/1/thumbnail-slider-5.jpg" alt="" /> </div> <div> <img src="r/1/thumbnail-slider-6.jpg" alt="" /> <div class="descBg"></div> <div class="description">Read in Leisure</div> </div> </div> </div> ... ... </body>

CSS:

CSS of Thumbnail Slider Demo 1

You can customize the style of the thumbnail slider by modifying the CSS stylesheet.

The thumbnail slider has built-in navigation buttons and bullets. Their location and style are fully customizable through the class selector .navPrev, .navNext, .navPlay, .navPause and .navBullets.

JavaScript:

Javascript of the Thumbnail Slider

At the top of the Javascript file is the sliderOptions:
var sliderOptions=
{
  SliderId: "imageSlider",
  AnimationType: "Horizontal",
  ScrollInterval: 2500,
  ScrollDuration: 300,
  AutoScroll: true,
  ScrollAllInView: false,
  Circular: true,
  License: "mylicense"
};
You can change the values as desired.

Note: The license key for this legacy version of thumbnail slider is different from other Menucool sliders. Please mention that you are buying the legacy version in the comments box of the Buy Now page.

Price: US$20.00 per site. Buy Now
Note: If you are using this legacy version slider, you need to enter the following words into the Comment box on our Buy Now page: "Using the legacy version of the thumbnail slider". This will help us to issue the correct license.