Smooth Image Carousel In Vanilla JavaScript – vanillaslider.js

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


Smooth Image Carousel In Vanilla JavaScript – vanillaslider.js


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" 
    <li><img src="1.jpg"></li>
    <li><img src="2.jpg"></li>
    <li><img src="3.jpg"></li>

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.

  // 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

// slides to next slide;

// slides to previous slide

You Might Be Interested In:

One thought on “Smooth Image Carousel In Vanilla JavaScript – vanillaslider.js

Leave a Reply