Dead Simple Image Carousel In Pure JavaScript – simpleSlider.js

Preview:

Description:

simpleSlider.js is an ultra-light JavaScript slider plugin for creating a responsive, CSS-less, touch swipe-enabled, fully configurable image carousel with smooth rAF powered animations.

How to use it:

Just load the main JavaScript file simpleslider.js in the document and we’re ready to go.

<script src="simpleslider.js"></script>

Optionally, you can load the Hammer.js library to provide the swipe gesture support.

<script src="/path/to/hammer.min.js"></script>

Insert a series of images into the slider container as this:

<div id="myslider" class="slider">
  <img src="1.jpg">
  <img src="2.jpg">
  <img src="3.jpg">
  ...
</div>

Initialize the library and done.

simpleslider.getSlider({
  container: document.getElementById('myslider')
});

All possible options to customize the slider.

simpleslider.getSlider({
  // he HTML element that act as a container for the slider.
  container: document.querySelector('*[data-simple-slider]),
  // A list of children to be used as slides.
  // You can use the querySelectorAll to have more flexibility on what children of the container element should be used as slides. 
  children: container.children,
  // Controls carousel auto-transition/slideshow. If value is true no transition will happen. 
  paused: false, 
  // Determines the css property to be animated.
  prop: left,
  // Tthe duration of animation transition.
  duration: 0.5,
  // Value determining the wait between each animation when auto-transition is enabled. 
  delay: 3000,
  // Initial value of slide elements when starting a transition animation. 
  init: -100,
  // The value a slide element should have when it is displayed.
  show: 0,
  // The value a slide will move to during a transition animation.
  end: 100,
  // The css unit value to be used. 
  unit: '%',
  // An ease function, you can use any of these. Defaults to defaultEase internal function.
  ease: function(){},
  // Invoked each time a slide changes.
  onChange: function(){},
  // Invoked at the end of the slide transition.
  onChangeEnd: function(){}
});