Smooth Image Carousel In Vanilla JavaScript – vanillaslider.js

Preview:

Description:

A lightweight vanilla JavaScript slider plugin which allows to cycle through a list of images in a carousel fashion. Smooth sliding effects are based on CSS3 transitions.

How to use it:

Load the following JavaScript and CSS files in the webpage.

<link rel="stylesheet" href="/path/to/vanillaslider.css">
<script src="/path/to/vanillaslider.js"></script>

Add a list of images to the slider as follow:

<div class="vanilla-slider">
  <ul class="vanilla-slider-container" 
      data-height="300" 
      data-width="400">
    <li><img src="1.jpg"></li>
    <li><img src="2.jpg"></li>
    <li><img src="3.jpg"></li>
    ...
  </ul>
</div>

Create a new VanillaSlider and pass the selector of the slider container as the first parameter to the VanillaSlider object.

var mySlider = document.querySelector('.vanilla-slider');
var vanillaSlider = new VanillaSlider(mySlider);

Initialize the VanillaSlider with default options.

vanillaSlider.init({
  // options can be placed here
});

Default configuration options.

// autoplay
autoplay: false,
// autoplay interval
autoplayTime: 3000,
// shows navigation
control: true,
// shows pagination
pagination: false

API method.

// slides to a specific slide
mySlider.goTo(index);
// slides to next slide
mySlider.next();
// slides to previous slide
mySlider.prev();