Javascript Image Slider - Non jQuery

Demos: 012 345 678

Need touch-enabled responsive image slider? Check out Ninja Slider.

Basic Features

  • Pure Javascript ( non jQuery, non flash ) Why jQuery is not used in our script?
  • Lightweight (16kb)
  • HTML captions
  • 17 transition effects, customizable
  • Easy to tweak through Javascript option variable and CSS
  • Support linking images
  • Slider starts on DOM ready (DOMContentLoaded) instead of the delayed window.onload
  • Can set starting slide (by any index number, or random/shuffle)
  • Supported by all major browsers cross browser compatible
    IE 7.0+, Firefox 1.5+, Chrome 1.0+, Safari 3+, Opera 9.0+, Netscape 7.0+
  • Create/update image slider dynamically
  • Price: Free   (or $20 if advanced features are used, see below)

 

Advanced Features

  1. Lazy loading images:
    Each image will be preloaded in background only when it is about to be displayed (during the pause time of its previous image). The image slider can include unlimited number of images.
  2. Thumbnails support(see demo 2, 3, 5)
  3. Video or audio Support(see demo 6:  Video Slider,   Play HTML5 Video or Audio in slider)

License is required for using the advanced features.
About the license     Licens Fee: US$20.00.    Buy Now

Easiest Way to Use the Image Slider

Download the demos, copy the demo's code and paste it into your page. When you see it is working, you can start customizing it to your own style by tweaking the HTML, CSS code, or changing the options in the JavaScript file(js-image-slider.js).

The source code in the download package includes: HTML (demo1-8.html), CSS (js-image-slider.css), and Javascript (js-image-slider.js).

HTML

<!DOCTYPE html> <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="sliderFrame"> <div id="slider"> <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" /> </div> </div> </body> </html>

Note:

  • 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),
instead of:
<img src="image.jpg" alt="image desc" />
You can:
<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> </a>

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> or: <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>

CSS

Edit the CSS file(js-image-slider.css) to suit your own design. You mainly need to:
  • Make the slider the same size as your images. For example:
    #slider { width:960px;height:420px; }
    Note: All slider images should have the same size, and the slider should be set to the size. Scale images?
  • Position the built-in navigation bullets:
    /* ------ built-in navigation bullets wrapper that is relative to the #slider ------*/
    div.navBulletsWrapper { top:320px; left:280px; }
  • If thumbnails are included, check the source code to see how the CSS selectors #thumbs, .thumb, .thumb-on are configured.

JavaScript

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
• Using Notepad to open and edit the JavaScript file
var sliderOptions = { sliderId: "slider", startSlide: 0, 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,   Play HTML5 Video or Audio in slider.

Build/Update On the Fly Support

Take a look at demo 7:   Create Image Slider Dynamically.

Additional functionalities

Built-in functions:   next(), displaySlide(indexNumber), ...

Event handlers:   beforeSlideChange, afterSlideChange

Instructions are in Demo 4

License

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 = { ...... license: "mylicense" };
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


  Change Log:
  • v2014.1.4
    Fixed the issue that video sometimes does not play properly on handheld devices;
  • v2013.12.15
    Fixed the bug that touching the slider stops its animation on handheld devices;
  • v2013.11.22
    Slider starts on DOM ready (DOMContentLoaded) instead of the delayed window.onload.
    Added startSlide option: starting slide can be any index number, or by random/shuffle.
  • v2013.8.27
    Added HTML5 video/audio support; Fixed the bug that image corners don't get rounded by Chrome (not clip border-radius bug)
  • v2013.8.3
    This release fixed the issue that since iPhone and iPad update from IOS 6.0 to 6.1.3 the Youtube movies in the slider won't load anymore.
  • v2013.7.23
    Allows image lazy loading; Performance optimization.
  • v2012.11.22
    [Update] Allows the image slider to be in a display:none panel on page load;
  • 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 15kb that is much less than the jQuery scripts ( jQuery library is already more than 90kb)

The slider image is not scalable as the images in this slider will be used as the background of the sliced DIVs, and the background image cannot be scaled. If you cannot redesign/resize the images, you have the following options:
  • Content Slider that allows any HTML content. So you can resize the images by their CSS class or the inline style such as <img src="..." style="width:300px; height:160px;" />
  • Use our Ninja Responsive Slider that will scale the image automatically to the size of the slider's containing block or browser.
  • 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 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 that has used its advanced features but has not been set with a valid license will periodically show a purchase reminder. So make sure to install the license before the slider going live in production.
  • You can set the license to "b6t80" to disable the purchase reminder if running locally(e.g. file:///D:/jsImgSlider/demo6.html) or using the localhost server(e.g. http://localhost:8888/demo6.html)
For example, effect: "13" means showing all slides in fading effect; effect: "9, 16, 7" means showing slides in SlideInLeft, BoxRandom and FoldLeft effects.

You can also set effect: "series1", or effect: "series2". series1 and series2 are two preset collection of effects:

series1: 6, 8, 15, 2, 5, 14, 13, 3, 7, 4, 14, 1, 13, 15
(Effects 13, 14, 15 occured twice so that they have more chances to play)

series2: all transition effects from 1 to 17
hoverPause: 0, 1 or 2.
0 - no pause when hovered;
1 - pause when mouseover the slider;
2 - pause when mouseover either the slider or the thumbnails(if any, as demo2 - 4)
     demo5 won't pause when mouseover the thumbnails because its hoverPause was NOT set to 2.
"none", "fade", or "rotate".
true or false. If true, the effect will be sliding in from left or right for manual navigation such as clicking Prev, Next, navigation bullets, or thumbnails.

Set the starting slide. It can be any index number (0-based), or "random", or "shuffle". Example: startSlide: "shuffle",

Note: "shuffle" will change the sequence order but "random" will not.


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 ...