- Pure Javascript ( no jQuery, no flash )
Why jQuery is not used in our script?
- Performance:
This slider script has utilized the requestAnimationFrame function that makes animations silky smooth, synced with your GPU and hog much less CPU.
The requestAnimationFrame function is currently supported by Chrome and Firefox. The slider degrades nicely to the setInterval function in other browsers.
For some reason, jQuery declined the use of the requestAnimationFrame. Thus our slider excels jQuery sliders in performance, giving audience a very smooth and visually pleasing experience.
- Lightweight:
The script weighs 13kb that is much less than the jQuery scripts ( jQuery library is already more than 90kb)
- Lightweight (13kb)
- HTML captions
- 17 transition effects, customizable
- Easy to tweak through Javascript option variable and CSS
- Support linking images
- Supported by all major browsers
IE 7.0+, Firefox 1.5+, Chrome 1.0+, Safari 3+, Opera 9.0+, Netscape 7.0+
- Price: Free
Advanced Features
A license is required for using the advanced features.
About the license
Price: US$20.00. Buy Now
Easy to Use
The HTML below shows its simplicity:
<html>
<head>
<link href="js-image-slider.css" rel="stylesheet" type="text/css" />
<script src="js-image-slider.js" type="text/javascript"></script>
</head>
<body>
<div id="slider">
<img src="slide-1.jpg" alt="Caption for slide 1" />
<img src="slide-2.jpg" />
<a href="http://www.menucool.com"><img src="slide-3.jpg" /></a>
<img src="slide-4.jpg" />
<img src="slide-5.jpg" alt="Caption for slide 5" />
</div>
</body>
</html>
The easiest way to use the slider is: download -> copy & paste -> tweak
Click Directions for more instructions.
HTML
CSS
Edit the CSS file(js-image-slider.css) to suit your own design. You mainly need to:
JavaScript
Customize the image slider by changing the sliderOptions in the js-image-slider.js file:
Note: Using Notepad to open and edit the JavaScript file
var sliderOptions =
{
sliderId: "slider",
effect: "series1",
effectRandom: false,
pauseTime: 2800,
transitionTime: 1200,
slices: 14,
boxes: 8,
hoverPause: 1,
autoAdvance: true,
captionOpacity: 0.4,
captionEffect: "fade",
thumbnailsWrapperId: "thumbs",
m: false,
license: "mylicense"
};
Video Support
Please refer to demo 6: Video Slider.
Build/Update On the Fly Support
Please refer to demo 7: Create Image Slider Dynamically.
License
It is free to use the slider with basic features.
Utilizing the advanced features (integrated thumbnails, build/update on the fly, or video support) requires a license.
How the license works?
- 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 js-image-slider.js 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's advanced features may not work if the verification fails. So make sure to install the license before the slider going live in web server.
When you have acquired the license, open the js-image-slider.js file with Notepad,
and replace the license value with yours.
var sliderOptions =
{
......
license: "mylicense"
};