A vanilla javascript slider plug-in that's made to be styleable
npm install ga-basic-sliderIf you want to design your own slider and can build it in html and css, gaBasicSlider can animate it and give you API controls into your own design. See working example.
Noteworthy features:
- 1.8KB gzipped
- Touch support
- Parallax animation
- Move parts around to fit your design
- Infinite looping navigation
gaBasicSlider takes in markup that have a parent child relationship and animates them with a simple parallax effect. You can optionally pass in nodes for next and previous buttons. gaBasicSlider also takes in a node where it can either generate indicators or use your existing markup as indicators.
First let's look at the markup for the slider itself.
``html
gaBasicSlider adds the minimum amount of CSS to position the slides on top of each other and to animate between them.
At this point we can turn the slider on with the following JavaScript.
html
`$3
I leave the position and look of these buttons entirely up to you, all gaBasicSlider does is add click handlers.
html
`$3
You can pass in an empty element where you want gaBasicSlider to genereate indicators.
html
`This is what the generated html will look like for a slider with three slides.
html
•
•
•
`The class
is added to the active indicator.$3
All you need to do to use custom indicators is just create the markup for it inside your indicator element. When gaBasicSlider sees you've created markup for the indicators it will only attach click handlers. Note when using custom indicators your responsible for making sure the number of indicators match the number of slides.
`html
Custom Indicator 1
Custom Indicator 2
Custom Indicator 3
`The class
will be added to your custome indicators as well.Simple API
Animation can be turned on and off using this simple API.
`javascript
mySlider = new gaBasicSlider(params);mySlider.stop() // turn animation off
mySlider.start() // turn animation on
`Parameters
This table shows each gaBasicSlider parameter as well as the variable type of each parameter and what it's value will default to if omitted.
| Parameter | Type | Default |
| :----------------------- |:--------------------- | :------------ |
| slider | Node | null |
| indicators | Node | null |
| btnNext | Node | null |
| btnPrevious | Node | null |
| animate | Boolean | true |
| animationDelay | Number (milliseconds) | 6000 |
| animationDuration | Number (milliseconds) | 300 |
Here is what it looks like when we set the options in JavaScript.
javascript
var params = {
slider: document.getElementById('slider'),
btnNext: document.getElementById('sliderNext'),
btnPrevious: document.getElementById('sliderPrevious'),
indicators: document.getElementById('sliderIndicators')
};mySlider = new gaBasicSlider(params);
`
Events
Events are dispatched when the slider is initiated, started, and stoped. You can listen for them by adding event listeners
javascript
var slider = document.getElementById('mySlider');slider.addEventListener('initiated', function (e) {
// called when initiated
}, false);
slider.addEventListener('start', function (e) {
// called when animation is started
}, false);
slider.addEventListener('stop', function (e) {
// called when animation is stopped';
}, false);
``