SLighter

An ultra-lightweight slideshow in pure javscript with css animation

Usage

Firstly include the script and the stylesheet (it is recommended to customize them, you can use the .scss and .ts file) on your HTML page:

<!DOCTYPE html>
<html>
  <head>
    ...
    <link rel="stylesheet" href="build/slighter.css">
    ...
  </head>
  <body>
    ...
    <script src="build/slighter.js"></script>
  </body>

Then create a slider container with some slide inside:

<!DOCTYPE html>
<html>
  <head>
    ...
  </head>
  <body>
    ...
    <div class="slider">
        <img src="img1.jpg" alt="...">
        <img src="img2.jpg" alt="...">
        <img src="img3.jpg" alt="...">
    </div>
    ...
  </body>

And finally active the slideshow:

let slider = new Slighter(
    document.querySelector('.slider'), // your slideshow container
    5000 // frame duration in ms
);

Jupi007/SLighter

SLighter

Usage