Minimal Mobile-compatible Image Carousel – lightweight-slider

Category: Javascript , Slider | September 30, 2018
Views Total:821 views
Official Page:Go to website
Last Update:September 30, 2018


Minimal Mobile-compatible Image Carousel – lightweight-slider


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="" class="slider">
  <img src="" class="slider">
  <img src="" 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>

You Might Be Interested In:

Leave a Reply