Minimal Responsive Image Slider In Vanilla JavaScript

Category: Javascript , Slider | September 13, 2017
Author: LukaKerr
Views Total: 325
Official Page: Go to website
Last Update: September 13, 2017
License: MIT

Preview:

Minimal Responsive Image Slider In Vanilla JavaScript

Description:

A really simple JavaScript slider library used for generating an auto-rotating, fully responsive image slider/carousel with custom pagination/navigation controls.

How to use it:

Download and insert the slider.js script into the html document.

<script src="slider.js"></script>

Add images and pagination/navigation controls to the slider container.

<div class="banner">
  <img src="1.jpg" class="slider">
  <img src="2.jpg" class="slider">
  <img src="3.jpg" class="slider">

  <div class="previous" data-previous-cursor="left.png"></div>
  <div class="next" data-next-cursor="right.png"></div>

  <div class="links">
      <a href="1"></a>
      <a href="2"></a>
      <a href="3"></a>
  </div>
</div>

Config the slider using the following ‘data’ attributes:

  • data-height: height of the slider
  • data-width: width of the slider
  • data-slide-speed: animation speed
  • data-autoslide: autoplay interval
  • data-next-cursor: next indicator
  • data-previous-cursor: preview indicator
<div class="banner" 
     data-height="600" 
     data-width="100%" 
     data-slide-speed="900" 
     data-autoslide="5000">
  <img src="1.jpg" class="slider">
  <img src="2.jpg" class="slider">
  <img src="3.jpg" class="slider">

  <div class="previous" data-previous-cursor="left.png"></div>
  <div class="next" data-next-cursor="right.png"></div>

  <div class="links">
      <a href="1"></a>
      <a href="2"></a>
      <a href="3"></a>
  </div>
</div>