https://github.com/dhavalwd/basic-slider
Basic Slider - Simple Slider with Simple API
https://github.com/dhavalwd/basic-slider
javascript javascript-plugin slider slider-plugin
Last synced: 10 months ago
JSON representation
Basic Slider - Simple Slider with Simple API
- Host: GitHub
- URL: https://github.com/dhavalwd/basic-slider
- Owner: dhavalwd
- License: mit
- Created: 2018-12-07T14:23:01.000Z (about 7 years ago)
- Default Branch: master
- Last Pushed: 2018-12-20T13:57:07.000Z (about 7 years ago)
- Last Synced: 2025-02-15T15:16:37.960Z (10 months ago)
- Topics: javascript, javascript-plugin, slider, slider-plugin
- Language: JavaScript
- Homepage: https://dhavalwd.github.io/basic-slider/
- Size: 1.06 MB
- Stars: 3
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
Basic Slider
Simple Slider with Simple API - No Dependency
**_NOTE: This is purely for educational and learning purpose. Don't use this in production._**
[Documentation](https://dhavalvyas.gitbook.io/basic-slider/)
## Installations
Very easy setup. This is work in progress. CSS is not included in the library.
### HTML Markup
```html
Slide 1
Slide 2
```
### Using ``
_This is minified version._
```html
<script type="text/javascript" src="https://unpkg.com/@dhavalvyas/basic-slider/dist/index.js">
```
Demo using direct `` tag. [Basic Slider - Demo](https://codepen.io/cooldhavs/full/vvBKzr "Basic Slider - Demo")
OR
### Using npm
`npm i @dhavalvyas/basic-slider`
Demo using direct `npm`. [Basic Slider - Demo](https://dhavalwd.github.io/basic-slider/ "Basic Slider - Demo")
## Instructions
### DEMO
Here is the codepen link for the current working demo.
[Basic Slider - Demo](https://codepen.io/cooldhavs/full/vvBKzr "Basic Slider - Demo")
## Options
Some options to configure your slider. Below are default values.
```javascript
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
```javascript
// Re-initialize the slider
slider.reInit();
// Destroy slider
slider.destroy(() => {
console.log("This is a callback once Slider is destroyed");
})
```