Lightweight Any Content Slider In Vanilla JavaScript – vanillaSlider

Category: Javascript , Slider | October 10, 2018
Author: cthedot
Views Total: 442 views
Official Page: Go to website
Last Update: October 10, 2018
License: MIT


Lightweight Any Content Slider In Vanilla JavaScript – vanillaSlider


A simple, responsive, touch-friendly vanilla JavaScript slider that aims for rotating through any HTML elements with custom CSS animations.

Basic usage:

Download and put the vanillaSlider’s files in the document.

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

Include the hammer.js for the support of touch events.

<script src=""></script>

The basic html structure for the slider.

<div class="vslider default">

The JavaScript to render a basic slider on the web page.


To config the slider, pass the following options object as the second parameter to the ‘vanillaSlider’ function.

    itemSelector: 'div',
    prefix: 'vslider-',

    // if null set height automatically else use height
    // number (=px) or explicit like "3em"
    height: null,

    rotation: true,
    autoplay: true,
    initialTimeout: 4000,
    timeout: 8000,

    navigation: true,
    keyboardnavigation: true,
    // needs Hammer.js
    swipenavigation: true,
    swipedirection: 'h', // h or v
    wheelnavigation: false,
    onSwipeWheel: null,

    status: true,
    statusContent: function (index, length) {
      return '•';

    after: function (index, length) {}



  • Fixed for MS Edge

You Might Be Interested In:

Leave a Reply