Some description
Nam libero tempore
demos:   123

Thumbnail Slider

Note: The Thumbnail Slider has been rewritten and upgraded to jQuery Slider. This is the legacy version of the Thumbnail Slider. We keep this legacy script as some users prefer this compact and easy-to-use version.
  • Pure Javascript (11kb)
  • 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
    IE 6.0+, Firefox 1.5+, Chrome 1.0+, Safari 3+, Opera 9.0+, Netscape 7.0+
  • License Fee: $20.00
    About License

Source Code of Demo 1

HTML:

<head> <link href="r/1/slider.css" rel="stylesheet" type="text/css" /> <script src="r/1/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 that you can customize: var sliderOptions = { SliderId: "imageSlider", AnimationType: "Horizontal", ScrollInterval: 2500, ScrollDuration: 300, AutoScroll: true, ScrollAllInView: false, Circular: true, License: "mylicense" };
"Horizontal", "Vertical", or"Fade"
true or false. If set to true, when the first thumbnail is scrolled away from view, the slider will pause. Otherwise, when set to false, all thumbnails viewable in the frame will be scrolled away from view.
true or false indicating if auto advance or not.
true or false. If set to true, when the first thumbnail is scrolled away from view, the slider will pause. Otherwise, when set to false, all thumbnails viewable in the frame will be scrolled away from view.
true or false indicating if sliding is in continuous loop.

License: