Author: | lukakerr |
---|---|
Views Total: | 821 views |
Official Page: | Go to website |
Last Update: | September 30, 2018 |
License: | MIT |
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>