Smooth Image Carousel In Vanilla JavaScript – vanillaslider.js

Category: Javascript , Slider | April 15, 2017
Author: kgruszowski
Views Total: 202
Official Page: Go to website
Last Update: April 15, 2017
License: MIT

Preview:

Smooth Image Carousel In Vanilla JavaScript – vanillaslider.js

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();
  • galulex

    It can be implemented in pure CSS without JavaScript at all