jQuery Slider


HTML Content

This slide shows that HTML/Text can also be used as thumbnails
Demos: 1234

Try Differnt Options

scrollByEachThumb: Apply
circular:
hoverPause:
autoAdvance:
scrollInterval: milliseconds
scrollDuration: milliseconds

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

License: US$20     About the license

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 cross browser compatible
    IE 6.0+, Firefox 1.5+, Chrome 1.0+, Safari 3+, Opera 9.0+, and most major handheld devices

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. Download the demos and source code by clicking the above Download button.
    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
    If you are using the jQuery version, the jQuery script should also be included before the jQuery-slider.js:
    <script src="jquery-1.7.1.min.js" type="text/javascript"></script> <script src="jquery-slider.js" type="text/javascript"></script>
  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" };
    • sliderId: the thumbnail slider id that you specified in the slider's HTML code
    • direction: "horizontal" or "vertical"
    • scrollByEachThumb: 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.
    • hoverPause, autoAdvance, circular: true or false. The names are give-aways as to what each does
    • scrollInterval: the duration that each slide stays in milliseconds
    • scrollDuration: the scrolling time in milliseconds
    • largeImageSlider: 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.
    • inSyncWithLargeImageSlider: true or false. If set to false, the JavaScript Image Slider won't carousel along with the thumbnail slider unless a thumbnail is clicked.
    • license: the place to put your license.
  4. The navigation buttons (Previous, Next, Pause, Play) and navigation bullets are automatically generated by the Javascript. Their layouts and styles can be customized via the CSS file.
    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. 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).
    3. 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:
    License Fee: US$20.00
    Buy License Now
    • A license is required before the slider goes to web server. Otherwise, the slider will not work on the Internet (such as bullets not being displayed).
    • The license entitles a website to use any or all of Menucool sliders except the Ninja Slider
    • The license is issued on a per-domain basis (valid for a domain and its sub-domains)
    • The license is valid forever for future upgrades/releases with no requirement to renew
    • The acquired license should be set to the license property in the slider's JavaScript file. The JavaScript will use its own match pattern code to verify the license with the domain name on the browser's address bar. So the JavaScript file itself will do the checking and no other services will be involved. The slider will not work properly if the verification fails.

    When you have acquired the license, open the JavaScript file with Notepad, and replace the license value with yours.

    var mct1_Options = { ...... license:"mylicense" };

Ask Question

Question Title:
Your name:
+ =    
  • If your question is for troubleshooting, please read Troubleshooting Request before posting.
  • A title with good keywords will help others. Please make your title specific and on-topic
  • Questions related to styles(CSS) may not be answered

more ...