https://github.com/fionnachan/fifi-slider
Supports IE10+. Pure JavaScript. Non-jQuery-dependent. CSS3 transition.
https://github.com/fionnachan/fifi-slider
css3-animations no-jquery plugin pure-javascript slider slider-plugin vanilla-javascript
Last synced: 11 months ago
JSON representation
Supports IE10+. Pure JavaScript. Non-jQuery-dependent. CSS3 transition.
- Host: GitHub
- URL: https://github.com/fionnachan/fifi-slider
- Owner: fionnachan
- Created: 2017-03-10T04:10:10.000Z (over 9 years ago)
- Default Branch: master
- Last Pushed: 2017-03-20T11:01:21.000Z (about 9 years ago)
- Last Synced: 2025-07-02T10:08:10.574Z (12 months ago)
- Topics: css3-animations, no-jquery, plugin, pure-javascript, slider, slider-plugin, vanilla-javascript
- Language: JavaScript
- Size: 29.3 KB
- Stars: 2
- Watchers: 3
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# fifi-Slider
Supports IE10+. Pure JavaScript. Non-jQuery-dependent. CSS3 transition.
[Slider Demo 1 on CodePen](http://codepen.io/fionnachan/pen/Qppdgj)
[Slider Demo 2 on CodePen](http://codepen.io/fionnachan/pen/ryYrpP)
#### For the DOM:
```
.slider
.slide
img(src="your-image-here")
.dots-wrapper(id="dots-wrapper-4")
```
#### For the script:
var test_slider = new fifi_slider({
target: document.querySelector('.slider'),
dotsWrapper: document.querySelector('.dots-wrapper'),
arrowLeft: document.querySelector('.arrowLeft'), // build your own arrow and pass it in, the plugin will attach a click eventlistener
arrowRight: '', // leave it as '' if you don't need arrows
autoplay: { // autoplay function not built yet***
on: false,
interval: 1000 // in ms
},
transition: {
speed: 300, // in ms
easing: '' // CSS3 easing as 'linear' in transition: all 0.6s linear;
},
swipe: true,
autoHeight: true,
startSlide: 0, // from 0,
afterChangeSlide: function afterChangeSlide() {} // customized callback after changing the slide
});