Smooth Image Carousel In Vanilla JavaScript – vanillaslider.js

Category: Javascript , Slider | April 15, 2017
Views Total:2,205 views
Official Page:Go to website
Last Update:April 15, 2017


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