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.
- Allows any HTML content even without any images
- Supports varying width or height
- Horizontal or vertical
- 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
Easy to Use
You will see how simple and flexible it is to use the slider from the HTML below:
<link href="slider.css" rel="stylesheet" type="text/css" />
<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" />
- Download the demos and source code by clicking the above Download button.
If you are using the jQuery version, the jQuery script should also be included before the jQuery-slider.js:
var mct1_Options =
- 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.
- inSyncWithLargeImageSlider: true or false. If set to false,
- license: the place to put your license.
Note: You may not see the nav buttons or bullets in one of the following conditions:
- 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).
- You've made them invisible through CSS by setting them: display: none;
- 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?
- 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 slider will not work properly if the verification fails.
and replace the license value with yours.
var mct1_Options =