Easy Responsive Carousel In Vanilla JavaScript – Ideal Image Slider

Ideal Image Slider is a standalone and easy-to-use JS library that lets you create responsive, accessible, extensible, touchable, retina-ready images sliders with smooth CSS3 powered slide or fade transitions.

How to use it:

Import the core JavaScript and CSS files into your webpage.

<link rel="stylesheet" href="ideal-image-slider.css">
<script src="ideal-image-slider.js"></script>

Include a theme CSS of your choice:

<link rel="stylesheet" href="default.css">

Include built-in extensions when needed:

<script src="extensions/captions/iis-captions.js"></script>
<script src="extensions/bullet-nav/iis-bullet-nav.js"></script>

Wrap your images with retina versions into a DIV container named ‘slider’:

<div id="slider">
  <img src="img/1.jpg" data-src-2x="img/[email protected]" alt="Slide 1" />
  <img data-src="img/2.jpg" data-src-2x="img/[email protected]" src="" alt="Slide 2" />
  <a href="http://example.com"><img data-src="img/3.jpg" data-src-2x="img/[email protected]" src="" alt="Slide 3" /></a>
  <img data-src="img/4.jpg" data-src-2x="img/[email protected]" src="" alt="Slide 4" />
</div>

Create a new instance of the Ideal Image Slider.

var slider = new IdealImageSlider.Slider('#slider');

Active the image slider.

slider.start();

Config the image slider by passing the following options as the first parameter to the Slider method.

var slider = new IdealImageSlider.Slider({
    selector: '',
    height: 'auto', // "auto" | px value (e.g. 400) | aspect ratio (e.g. "16:9")
    initialHeight: 400, // for "auto" and aspect ratio
    maxHeight: null, // for "auto" and aspect ratio
    interval: 4000,
    transitionDuration: 700,
    effect: 'slide',
    disableNav: false,
    keyboardNav: true,
    previousNavSelector: '',
    nextNavSelector: '',
    classes: {
      container: 'ideal-image-slider',
      slide: 'iis-slide',
      previousSlide: 'iis-previous-slide',
      currentSlide: 'iis-current-slide',
      nextSlide: 'iis-next-slide',
      previousNav: 'iis-previous-nav',
      nextNav: 'iis-next-nav',
      animating: 'iis-is-animating',
      touchEnabled: 'iis-touch-enabled',
      touching: 'iis-is-touching',
      directionPrevious: 'iis-direction-previous',
      directionNext: 'iis-direction-next'
    }
});

Callback functions.

var slider = new IdealImageSlider.Slider({
    onInit: function() {},
    onStart: function() {},
    onStop: function() {},
    onDestroy: function() {},
    beforeChange: function() {},
    afterChange: function() {}
});

API methods.

// active the slider
slider.start();
// stop the slider
slider.stop();
// back to the prev slide
slider.previousSlide();
// goto the next slide
slider.nextSlide();
// goto slide 2
slider.gotoSlide(2);
// destroy the slider
slider.destroy();
// get an attribute value
slider.get(attribute);
// set an attribute
slider.set(attribute, value);