Tiny Image Slideshow With CSS Transitions – SLighter

Preview:

Description:

SLighter is an ultra-small slideshow JavaScript library that fades through images using CSS3 transitions.

How to use it:

1. Add reference to the SLighter’s JavaScript and CSS files:

<link rel=”stylesheet” href=”build/slighter.css” />
<script src=”build/slighter.js”></script>

2. Add images to the slider container.

<div class="slider">
  <img src="1.jpg" alt="Slide">
  <img src="2.jpg" alt="Slide">
  <img src="3.jpg" alt="Slide">
</div>

3. Initialize the Slighter slideshow and done.

let slider = new Slighter(document.querySelector('.slider'));

4. Determine the duration of the animation (5000ms in this example).

let slider = new Slighter(document.querySelector('.slider'), 5000);