Tiny Image Slideshow With CSS Transitions – SLighter

Category: Javascript , Slideshow | February 11, 2021
Views Total:504 views
Official Page:Go to website
Last Update:February 11, 2021


Tiny Image Slideshow With CSS Transitions – SLighter


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">

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);

You Might Be Interested In:

Leave a Reply