Easiest Way to Use the Image Slider
<link href="js-image-slider.css" rel="stylesheet" type="text/css" />
<img src="slide-1.jpg" alt="Caption for slide 1" />
<img src="slide-2.jpg" />
<a href="http://menucool.com"><img src="slide-3.jpg" /></a>
<img src="slide-4.jpg" />
<img src="slide-5.jpg" alt="Caption for slide 5" />
- The <!DOCTYPE> is required. Otherwise IE may not display the slider properly.
- If you prefer lazy loading images so that the slider can rotate unlimited number of large-size images, you can format the image markup in a differnt way. See Lazy Loading Images for details.
Lazy loaded slider image will not be loaded until the slider starts showing its previous image. It is preloaded in the background and it will be cached by the browser once obtained.
So the slider will start right away on page load without waiting for all slider images to be loaded, and each sliding image is available instantly.
How to Format Lazy Loading Image
For each image (usually it is not necessary for the first slide image),
<img src="image.jpg" alt="image desc" />
<a class="lazyImage" href="image.jpg" title="image desc"> . . . </a>
Above approach is good for SEO as the images are visible to search engines. However, when the image has already been wrapped with a link, it is illegal to nest a link with another link: <a><a></a></a>.
Fortunately there is another solution for this scenario as shown below:
<a href="(link adress)">
<b data-src="image.jpg" data-alt="image desc"> . . . </b>
Please refer to the download package where you can find the souce HTML code of the lazy loaded images. For example, the 2nd, 3rd and 4th slide image in demo3.html are all lazy loading images.
- HTML Caption:
Captions are set through each slide image's alt attribute. If the image is formatted as lazy loaded image, its caption can be defined by
the title or data-alt attribute:
<a class="lazyImage" href="(image url)" title="(caption)"> ... </a>
<b data-src="(image url)" data-alt="(caption)">...</b>
If the caption contains HTML content,
you can put the content inside a DIV or SPAN element (usually styled as display:none),
and set the alt as "#(id of the content container)". For example: alt="#caption4"
Image Links: You can add links to slide images by wrapping each image with <a> tag:
<a href="(url)"><img src=... /></a>
Edit the CSS file(js-image-slider.css) to suit your own design. You mainly need to:
Customize the image slider by changing the sliderOptions in the js-image-slider.js file:
Hovering on each option listed below to see the details
var sliderOptions =
Please refer to demo 6: Video Slider, Play HTML5 Video or Audio in slider.
Build/Update On the Fly Support
Take a look at demo 7: Create Image Slider Dynamically.
Built-in functions: next(), displaySlide(indexNumber), ...
Event handlers: beforeSlideChange, afterSlideChange
Instructions are in Demo 4
It is free to use the slider with basic features.
Including the advanced features (such as lazy loading images, thumbnail support, or video/audio support) requires a license.
How the license works?
When you have acquired the license, open the js-image-slider.js file with Notepad, and replace the license value with yours.
var sliderOptions =
Make sure you've installed the license before the slider going live in production if the slider contains advanced features.
License Fee: US$20.00Buy License Now