demos: 012345678

Javascript Image Slider - Non jQuery

Need a responsive image slider? or touch-enabled slider?

Check out Ninja Slider

Download   Release v2014.9.16
(8 demos and source code)

Basic Features

  • Hardware-accelerated Javascript ( non jQuery, non flash )
  • Lightweight (16kb)
  • HTML captions
  • 17 transition effects
  • Slider starts on DOM ready (DOMContentLoaded) instead of the delayed window.onload
  • Customizable starting slide (specific index, or random)
  • Supported by all major browsers
    IE 7.0+, Firefox 1.5+, Chrome 1.0+, Safari 3+, Opera 9.0+, Netscape 7.0+
  • Create/update image slider dynamically
  • Price: Free  (including commercial)
    or $20.00 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 (such as demo 2, demo 3, demo 5)
  3. Video or audio Support (demo 6: Video Slider,   Play HTML5 Video or Audio in slider)
  4. License is required when using the advanced features:
    License Fee: $20.00
    About License

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 download contains the source code: HTML samples (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 different way. See Lazy Loading Images for details.

Lazy loading slider image will not load until the slider starts showing its previous image. It is preloaded in the background and be cached by the browser once loaded. This allows the slider to start right away on page load without waiting for all images to be fully loaded.

How do I enable 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>

If your 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 a 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.


  • How do I add caption or text on top of a slide image?

    Caption is referred to the text content shown with the image. Caption can be defined through each slide image's alt attribute: <img src="..." alt="..." />

    If the image is marked up in the lazy loaded image format, its caption can be defined by the title or data-alt attribute:

    <a class="lazyImage" href="..." title="..."> ... </a> or: <b data-src="..." data-alt="...">...</b>

    How do I add HTML caption to a slide image?

  • How to add Image Links?

    Just wrap the image with the <a> tag:

    <a href="(url)"><img src=... /></a>

CSS

Edit the CSS file (js-image-slider.css) to suit your own design:
  • 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 that size. Scale images?
  • Position the built-in navigation bullets: /* --- The pager position is relative to the #slider --- */ div.navBulletsWrapper { top:320px; left:280px; }
  • If you are using thumbnails below/above/besides the slider, check the source code to see how the css selectors#thumbs, .thumb, .thumb-onare configured.

JavaScript

You can customize the JavaScript by changing the sliderOptions in the js-image-slider.js file:
• Hover on each option listed below to see the details
• Use Notepad to 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: "thumb_container_id", m: false, license: "mylicense" };

Built-in Functions and Event Handlers

Developers can use them to add additional functionality to the slider:

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

Event handlers:   beforeSlideChange, afterSlideChange

Instructions are in Demo 4

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.

License

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

Please visit Demo 1 for details.
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.

If the caption contains HTML content, you can put the content inside a DIV or SPAN element in the page, and set the alt="#(id of the content container)". For example: //For lazy loading image, the caption should be set to the title attribute instead of the alt attribute. //check out the demo 3 in the download package for details. <img src="..." alt="#caption4" /> ...... //The elments below can be anywhere in the page except within the slider element (<div id="slider">...</>) <div style="display: none;"> ...... <div id="caption4"> <b>HTML</b> content </div> </div>

QUESTION & ANSWER
More ...

 

Your Name
Question Title
+ =  
Troubleshooting question? please read Troubleshooting Request before asking.