Tiny Image Slideshow With CSS Transitions – SLighter

Category: Javascript , Slideshow | February 11, 2021
Author: Jupiter007-43
Views Total: 193 views
Official Page: Go to website
Last Update: February 11, 2021
License: MIT

Preview:

Tiny Image Slideshow With CSS Transitions – SLighter

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

You Might Be Interested In:


Leave a Reply