Minimal Mobile-compatible Image Carousel – lightweight-slider

Preview:

Description:

This is a lightweight, responsive, automatic, mobile-friendly image slider/carousel written in pure JavaScript.

The carousel automatically fades through your images at a given interval.

To manually transition between images, just click/tap on the sides of the slider.

How to use it:

Load the minified version of the lightweight-slider library in the document.

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

The HTML structure for the slider/carousel. You can customize the slider/carousel with the following HTML data attributes.

• data-height: height of the slider/carousel
• data-width: width of the slider/carousel
• data-slide: transition speed in ms
• data-autoslide: autoplay interval

<div class="banner" data-height="600" data-width="100%" data-slide-speed="900" data-autoslide="5000">
  <img src="https://picsum.photos/1200/600/?random" class="slider">
  <img src="https://picsum.photos/1300/600/?random" class="slider">
  <img src="https://picsum.photos/1400/600/?random" 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>