jQuery Slider

• pure JavaScript version (9kb minified)
  or:
  jQuery version (8kb minified, plus 92kb jquery-1.7.1.min.js )
• Allows any HTML content even without any thumbnail images
• Supports varying width or height
• Horizontal or vertical
• Can work together with the Javascript Image Slider which shows the corresponding large image of each thumbnail. See jQuery Slideshow
• Built-in navigation control
• Sliding time adjustable
• Infinite/Continuous sliding (optional)
• Pauses slideshow on hover (optional)
• Wide browser supoort
  IE 6.0+, Firefox 1.5+, Chrome 1.0+, Safari 3+, Opera 9.0+, Netscape 7.0+
• License: US$20.00    Buy Now     About the license

Easy to Use

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, or jquery-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. License:
   License Fee: US$20.00

   Buy License Now
   • A license is required before the slider goes to web server.
   • The license entitles a website to use any or all of Menucool sliders (jQuery Slider, Thumbnail Slider, JavaScript Image Slider, Content Slider, and Zoom 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" };