Simple Slider with Simple API - No Dependency
NOTE: This is purely for educational and learning purpose. Don't use this in production.
Very easy setup. This is work in progress. CSS is not included in the library.
<div class="slider">
<div class="item">
<img src="image/url/name.jpg" /> <span>Slide 1</span>
</div>
<div class="item">
<img src="image/url/name.jpg" /> <span>Slide 2</span>
</div>
</div>
This is minified version.
<script type="text/javascript" src="https://unpkg.com/@dhavalvyas/basic-slider/dist/index.js"></script>
Demo using direct <script>
tag. Basic Slider - Demo
OR
npm i @dhavalvyas/basic-slider
Demo using direct npm
. Basic Slider - Demo
Here is the codepen link for the current working demo.
Some options to configure your slider. Below are default values.
let slider = new BasicSlider({
selector: '.slider',
dotsWrapper: '.dots-wrapper',
arrowLeft: '.arrow-left',
arrowRight: '.arrow-right',
loop: true,
transition: {
speed: 300,
easing: 'ease-in'
},
onInit: (slider) => {
console.log("onInit: slider Object ---> ", slider);
},
onSlideChange: (slider) => {
console.log("onSlideChange: slider Object ---> ", slider);
}
})
// Re-initialize the slider
slider.reInit();
// Destroy slider
slider.destroy(() => {
console.log("This is a callback once Slider is destroyed");
})