HTML Content

This slide shows that HTML/Text can also be used as thumbnails
demos:   1234
Try Differnt Options
scrollByEachThumb:
circular:
hoverPause:
autoAdvance:
scrollInterval: milliseconds
scrollDuration: milliseconds

jQuery Slider

We rewrote our jQuery Slider in release v.2012.6.14. The jQuery version is decommissioned.

The download contains demos and source code of the slider.

Download plain Javascript version

Release v2014.1.4
jQuery version decommissioned

Here is the Legacy version of Thumbnail Slider



  • Plain JavaScript version (10kb minified) (jQuery version is decommissioned)
  • Allows any HTML content even without any images
  • Supports varying width or height
  • Horizontal or vertical
  • Can work together with the Javascript Image Slider which shows the large image corresponding to each thumbnail. See jQuery Slideshow
  • Built-in navigation controls
  • Support build/update dynamically (new in v2014.1.4)
  • Pauses slideshow on hover (optional)
  • Wide browser supoort
    IE 6.0+, Firefox 1.5+, Chrome 1.0+, Safari 3+, Opera 9.0+, and most major handheld devices
  • License Fee: $20.00
    About License

Easy to Use

You will see how simple and flexible it is to use the slider from the HTML below: <!DOCTYPE html> <html> <head> <link href="slider.css" rel="stylesheet" type="text/css" /> <script src="thumbnail-slider.js" type="text/javascript"></script> </head> <body> <div id="mcts1"> <img src="slider-1.jpg" /> <img src="slide-2.jpg" /> <a href="http://www.menucool.com"><img src="slide-3.jpg" /></a> <div class="textSlide"><p>HTML Slide</p>Text text text</div> <img src="slide-5.jpg" /> </div> </body> </html>
  1. Click the Download button above to download the demo and source code package.
    The source code is composed of three parts: HTML pages, CSS(slider.css), and Javascript(thumbnail-slider.js).
  2. Choose an appropriate demo in the downloaded package and put the HTML code and CSS/Javascript file links into your own page
  3. Customize the slider by changing the mct1_Options in the Javascript file: var mct1_Options = { sliderId: "mcts1", direction: "horizontal", scrollByEachThumb: true, hoverPause: true, autoAdvance: true, circular: true, scrollInterval: 1900, scrollDuration: 500, largeImageSlider: null, inSyncWithLargeImageSlider: true, license: "mylicense" };
    "horizontal" or "vertical"
    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
    Either null or imageSlider. If you want the Javascript Image Slider to show the corresponding large image for each slide, you can assign the Javascript Image Slider script object to this property. See jQuery Slideshow for details.
    true or false. If set to false, the JavaScript Image Slider won't carousel along with the thumbnail slider unless a thumbnail is clicked.
  4. The navigation buttons (Previous, Next, Pause, Play) and navigation bullets(pagination) are automatically generated by the slider's script. Their layouts and styles are defined in the slider.css file, whihch can be customized to your own taste if you like.
    Note: You may not see the nav buttons or bullets in one of the following conditions:
    1. The navigation bullets control is not available when the scrollByEachThumb option was set to false in the Javascript;
    2. You have put the slider live on the Internet but the license is not valid
    3. Both nav buttons and bullets will be invisible when the slider has enough room to accommodate all thumbnails (You should avoid this by adding more thumbnails, or make the slider smaller through the CSS).
    4. You've made them invisible through CSS by setting them: display: none;
  5. Style Fully Customizable

    The slider style is fully customizable through the slider's CSS file.

    FAQ: How can I change border color of active thumbnail image?

  6. License    


QUESTION & ANSWER
More ...

 

Your Name
Question Title
+ =  
Troubleshooting question? please read Troubleshooting Request before asking.