Javascript Image Slider - Non jQuery

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

Features
Directions

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

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.
Thumbnails support (such as demo 2, demo 3, demo 5)
Video or audio Support (demo 6: Video Slider, Play HTML5 Video or Audio in slider)
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).

<!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 Link an Image?
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,
    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 with basic features can be used for free (including commercial).
The slider with advanced features (such as lazy loading images, thumbnail support, or video/audio support) requires a license.
The license is issued on a per-domain basis (valid for a domain and its sub-domains). Intranet domains and IP domains should also be licensed.

License Fee: $20.00
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:(port#)/demo6.html)
The license entitles a website to use any or all of Menucool sliders except the Ninja Slider
You can use the licensed widget multiple times within the website for which you've purchased the license.
When you have acquired the license, open the js-image-slider.js file with Notepad, and update the license value accordingly. var sliderOptions = { ...... license: "mylicense" };

FAQ about License

How the license works? Does it go to another web service to verify? Answer
Do I need a license for my dev and testing domain that is different from the final client's domain? Answer
Will it work for sub-domains? Answer
My website is on intranet. Do I need license for using your widgets in my intranet website? Answer
Do you provide developer license that can be applied to multiple websites? Answer
I have multiple domain names pointing to the same website. Can I apply multiple licenses to the same script? Answer
Do I need to renew the license for future upgrades/releases of the widget? Answer

You need to set the acquired license key to the license property in the widget's JavaScript file.

The JavaScript will use its own match pattern code to verify the license with the domain name on the browser's address bar. The JavaScript file will perform the validation by itself and no other services will be involved.

If the validation failed(the domain name doesn't match the license key), the UI component may periodically display a trial version alert, or even disable some functionalities.

The code is fully functional even if the script is not licensed (though it may periodically show a trial version alert). So usually you don't need the license in your dev phase.

If you are developing under the domain localhost, either the trial version alert will be disabled, or we have provided a license for the localhost that you can find in the License section of the product's main page.

Yes. If the license is valid for the main domain, it will also be valid for all its sub-domains(such as sub1.mydomain.com, sub2.mydomain.com).

Yes license is required for intranet domains, and you can enter your intranet domain into the For website box after clicking the Buy Now button.

No. It is on a per-domain basis only.

Yes, it is supported. The following links are the instructions:

For JS Image Slider For Ninja Slider For ddmenu For JS Tooltip

Note:

If your domain2.com will be redirected to your domain1.com, you only need a license for domain1.com. You don't need multiple licenses in this scenario.
If your multiple domains are obviously for the same site, such as menucool.com, menucool.net, menucool.com.us, you can input the regular price for the first domain, and input 1/2 of the price for the others.

No. The license will be valid forever as long as your domain is not changed.

If your domain name is changed, you need to purchase a separate license for the new domain.

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.

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>

Horizontal

Vertical

Tooltip Menu

CSS Tooltip Generator

JavaScript Tooltip

Responsive Slider

JS Image Slider

Thumbnail Slider

Tabbed Content

Responsive Tabs

Float Panel

Super Panel

Color Picker

Responsive Image Grid