An ultra-lightweight slideshow in pure javscript with css animation
See Demo
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
);All images from this repository are all rights reserved © Paul Kepinski