Basic Slider
Simple Slider with Sinple API - No Dependency
NOTE: This is purely for educational and learning purpose. Don't use this in production.
Installations
Very easy setup. This is work in progress. CSS is not included in the library.
HTML Markup
<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>
<script>
Using 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
Using npm
npm i @dhavalvyas/basic-slider
Demo using direct npm
. Basic Slider - Demo
Instructions
DEMO
Here is the codepen link for the current working demo.
Options
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);
}
})
Methods you can use:
// Re-initialize the slider
slider.reInit();
// Destroy slider
slider.destroy(() => {
console.log("This is a callback once Slider is destroyed");
})