olum-slider
OlumSlider is a lightweight and flexible slider, written via vanilla js
Documentation
CDN
<!DOCTYPE html>
<html lang="en">
<head>
<title>Olum Slider</title>
<style>
#slider {
height: 500px;
}
#slider .slide {
line-height: 500px;
text-align: center;
color: white;
font-size: 30px;
}
#slider .slide:nth-last-of-type(1) {
background-color: #FFC93C;
}
#slider .slide:nth-last-of-type(2) {
background-color: #364F6B;
}
#slider .slide:nth-last-of-type(3) {
background-color: #E84545;
}
</style>
</head>
<body>
<div id="slider">
<div class="slide">1</div>
<div class="slide">2</div>
<div class="slide">3</div>
</div>
<script src="https://unpkg.com/olum-slider@latest/dist/olum-slider.min.js"></script>
<script>
new OlumSlider({
container: document.getElementById("slider"),
arrows: true,
nextArrowIcon: "", // accepts html & text
prevArrowIcon: "", // accepts html & text
dots: true,
auto: true,
interval: 3000,
});
</script>
</body>
</html>
ES6 Module
import OlumSlider from "olum-slider";
new OlumSlider({
container: document.getElementById("slider"),
arrows: true,
nextArrowIcon: "", // accepts html & text
prevArrowIcon: "", // accepts html & text
dots: true,
auto: true,
interval: 3000,
});
149 Dec 28, 2022
5.4k Dec 28, 2022
53 Jan 3, 2023
2.5k Dec 25, 2022
676 Sep 24, 2022
2.2k Jan 8, 2023
33.7k Jan 9, 2023
4.9k Jan 3, 2023
58 Dec 12, 2022
7 Jul 26, 2022