Minimal Responsive Image Slider In Vanilla JavaScript

Preview:

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>

Changelog:

10/09/2018

• Bugfix