Easy Responsive Ideal Image Slider Carousel in vanilla JS

Ideal Image Slider is to create a slider with just the right amount of features, no bloat, and is easy to expand so more features can be added as ‘extensions’.

Here are the main ideas and features I wanted to include:

  • HTML5 (Optimized for SEO)
  • CSS3 transitions (some simple transitions like sliding/fade)
  • Left/Right Navigation (including touch/swipe support)
  • Responsive
  • HiDPI (retina) support
  • ARIA support
  • Very easy to setup (no dependencies)
  • Very stretchy
  • Uses gradual reinforcement
  • Open-source (it goes without saying)

As an example, here are some features that shouldn’t be in essence and can be optional extensions:

  • Themes or skins
  • More transitions
  • Bullet navigation
  • Thumbnail navigation
  • Full screen slider
  • Video/Audio support
  • etc…

How to make use of it:

1. Import basic JavaScript and CSS files into your web page.

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

2. Include a CSS theme of your choice:

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

3. Include included script when needed:

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

4. Wrap your images with retina versions in a DIV container called “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>

5. Create a new instance of the Ideal Image Slider.

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

6. Activate the image slider.

slider.start();

7. Configure 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'
    }
});

8. Callback functions.

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

9. 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);

Settings

SettingDefault ValueDescription
selector''CSS selector for the slider
height'auto'Height of the slider. Can be 'auto' (height changes depending on the height of the slide), a fixed px value (e.g. 400) or an aspect ratio (e.g. '16:9')
initialHeight400If height is 'auto' or an aspect ratio this is the height of the slider while the first image is loading
maxHeightnullIf height is 'auto' or an aspect ratio this is an optional max height in px for the slider (e.g. 800)
interval4000Time (in ms) to wait before changing to the next slide
transitionDuration700Duration (in ms) of animated transition
effect'slide'Transition effect (slide/fade by default)
disableNavfalseToggle the previous/next navigation (also disables touch and keyboard navigation)
keyboardNavtrueToggle keyboard navigation
previousNavSelector''Selector for custom previous nav element
nextNavSelector''Selector for custom next nav element
classes{...}List of classes to be used by slider. Probably shouldn’t be changed
EventDescription
onInitCallback that fires when slider and first image have loaded
onStartCallback that fires when slider has started playing
onStopCallback that fires when slider has stopped playing
onDestroyCallback that fires when slider is destroyed
beforeChangeCallback that fires before a slide has changed
afterChangeCallback that fires after a slide has changed
MethodDescription
start()Start the slider. Note the slider will automatically be stopped when navigation is used
stop()Stop the slider
previousSlide()Change to the previous slide
nextSlide()Change to the next slide
gotoSlide(index)Change to a specific slide (1 indexed)
destroy()Destroy the slider
get(attribute)Get an attribute value (attributes are mostly used internally)
set(attribute, value)Set an attribute. Can be useful for storing custom data

Easy Responsive Carousel, Ideal Image Slider Plugin/Github


See Demo And Download

Official Website(Codeinwp): Click Here

This superior jQuery/javascript plugin is developed by Codeinwp. For extra Advanced Usage, please go to the official website.

Share