Image Slider with Thumbnail Preview

You'll see thumbnail previews when hovering on pagination bullets in the demo. The thumbnail previews are created by the slider's built-in function, thumbnailPreview, with the assistance of the Menucool Tooltip widget.

1. Create an image slider
2. Add the tooltip.css and tooltip.js links into the head section of the page
3. Add the script below into the page // Place the script anywhere on your page (within the head or body // section, but not before the link to the js-image-slider.js ) <script> imageSlider.thumbnailPreview(function (thumbIndex) { return "<img src='images/thumb" + (thumbIndex + 1) + ".jpg' style='width:180px;height:75px;' />"; }); </script>

   The slider's built-in function, thumbnailPreview, takes a function as its parameter.

   The passed-in function will pass the thumbnail index number(zero-based), and return the tooltip content to show up.

   By above example, if passing 0 as the thumbnail index, "<img src='images/thumb1.jpg' style='width:180px;height:75px;' />" will be returned.

   Any image within the Tooltip should have its width and height explicitly defined either through in-line style or by a CSS class name.

And there you have it!

You can download the source code from page Menucool Javascript Image Slider

Please visit Menucool Tooltip for detailed instructions.

This demo has not used any advanced features of the JavaScript Image Slider, hence the slider license is not required. However, a Tooltip license ($20) is required for using the tooltip widget to preview thumbnails.
If you have also included slider's advanced features, slider license is also required.