Dead Simple Image Carousel In Pure JavaScript – simpleSlider.js

Category: Javascript , Recommended , Slider | April 30, 2017
Author: ruyadorno
Views Total: 2,896
Official Page: Go to website
Last Update: April 30, 2017
License: MIT

Preview:

Dead Simple Image Carousel In Pure JavaScript – simpleSlider.js

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(){}

});

 

You Might Be Interested In:


Leave a Reply