Thumbnail Slider demo 2
( Notice: The Thumbnail Slider has been rewritten and upgraded to jQuery Slider. This is the legacy version of the Thumbnail Slider.)
Displaying multiple slide images
If AnimationType is defined as Horizontal (through the Javascript source code) and the width of the imageSliderWrppper and imageSlider elements has been defined wider than each slide (they are specified through the CSS selector
#imageSliderWrapper, #imageSlider, and #imageSlider .item respectively), the thumbnail slider will display multiple slides aligned horizontally.
Alternatively, if AnimationType="Vertical" in the Javascript, and the height of the imageSliderWrapper/imageSlider has been specified higher than each slide, the thumbnail slider will display multiple slides aligned vertically.
ScrollInterval for each or for all
The ScrollAllInView option in the Javascript will determine if the ScrollInterval will be between each slides, or for all the images in view. Please try the ScrollAllInView options on the demo above.
There would be no navigation bullets (the
in the above demo) if
ScrollAllInView was set to true.
Source Code
For this demo, stylesheet and Javascript will be changed dynamically when applying different settings. You can see the source code by viewing the browser's source after applying different settings via clicking Apply button on the top-right of this page.
If you don't know how to get the source code by viewing the browser's source, you can download the source codes from below.
HTML:
<head>
<link href="r/2/slider.css" rel="stylesheet" type="text/css" />
<script src="prod/thumbnail-slider.js" type="text/javascript"></script>
... ...
</head>
<body>
... ...
<div id="imageSlider">
<div>
<a href="http://www.google.com/" target="_blank">
<img src="r/2/thumbnail-slider-1.jpg" /></a>
</div>
<div>
<a href="http://www.yahoo.com/" target="_blank">
<img src="r/2/thumbnail-slider-2.jpg" /></a>
</div>
<div>
<img src="r/2/thumbnail-slider-3.jpg" />
</div>
<div>
<img src="r/2/thumbnail-slider-4.jpg" />
</div>
<div>
<img src="r/2/thumbnail-slider-5.jpg" />
</div>
<div>
<img src="r/2/thumbnail-slider-6.jpg" />
</div>
<div>
<img src="r/2/thumbnail-slider-7.jpg" />
</div>
<div>
<img src="r/2/thumbnail-slider-8.jpg" />
</div>
</div>
... ...
</body>
CSS:
CSS of Thumbnail Slider Demo 2
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
For more detailed instructions, please refer to Demo 1.