Lightweight Any Content Slider In Vanilla JavaScript – vanillaSlider

Preview:

Description:

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="https://cdnjs.cloudflare.com/ajax/libs/hammer.js/2.0.8/hammer.min.js"></script>

The basic html structure for the slider.

<div class="vslider default">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  ...
</div>

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

vanillaSlider(
  document.querySelectorAll('.default')
)

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

vanillaSlider(
  document.querySelectorAll('.default'),{
    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) {}
  }
)

Changelog:

10/10/2018

• Fixed for MS Edge