@dhavalvyas/basic-slider
v1.2.1
Published
Basic Slider - Simple Slider with Simple API
Downloads
32
Maintainers
Readme
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>
Using <script>
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");
})