Sliderlight is a light-weight and basic JavaScript slider library which enables developers to easily create sliders which has features like navigation, pagination, touch-slider, drag-slider, slidesPerView and more.
We can install SliderLight using npm:
npm install sliderlight
import SliderLight from "sliderlight";
// import SliderLight styles
import "sliderlight/css";
You can directly use SliderLight in your ptoject using a CDN link
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/sliderlight@1/dist/sliderlight.min.css"
/>
<script src="https://cdn.jsdelivr.net/npm/sliderlight@1/dist/sliderlight-bundle.min.js"></script>
Git Repository: https://github.com/MoncyDev/slider-light/
const slider = new sliderLight(container, SliderOptions); // All slider options are optional
Here’s a basic example of how to use Slider-Light:
const slider = new SliderLight(".slider-container", {
//SliderOptions{}
prevButton: ".prev-slider-light",
nextButton: ".next-slider-light",
autoplay: 3000,
transition: 500,
margin: 20,
slidesPerView: 1,
pagination: ".slider-light-pagination",
breakpoints: {
// window width is >= 400px
400: {
slidesPerView: 2,
margin: 10,
},
// window width is >= 700px
700: {
slidesPerView: 3,
margin: 20,
},
// window width is >= 1024px
1024: {
slidesPerView: 4,
margin: 30,
},
},
});
<div className="slider-container">
<div className="slider-light">Slide 1</div>
<div className="slider-light">Slide 2</div>
<div className="slider-light">Slide 3</div>
<div className="prev-slider-light"></div>
<div className="next-slider-light"></div>
<div className="slider-light-pagination"></div>
</div>
.slider-light {
display: flex;
text-align: center;
align-items: center;
justify-content: center;
background-color: white;
border-radius: 30px;
color: black;
height: 300px;
}
.slider-container {
width: 90%;
margin: 20px auto;
}
This project is licensed under the MIT License - see the LICENSE file for details.