README
skh-slider
Vue Slider Made of Web Animation API
Demo Page
Information
Web Animation Api
Support Browser
Install
$ npm i skh-slider
How to Use
<imageSlider
:options="options"
:srcArr="srcArr"
:rotationEnd="rotationEnd"
:animationEnd="animationEnd"
style="width: 100%; height: 100%;"
></imageSlider>
import { imageSlider } from "skh-slider";
export default {
components: {
imageSlider
},
data() {
return {
options: {
ms: 3000,
type: "slide",
loop: true,
appear : true,
animationOptions: {
duration: 1500,
fill: "none",
easing: "ease"
},
imageOptions: {
objectFit: "contain"
}
},
srcArr: [
"https://your_source_url1.png",
"https://your_source_url2.png",
"https://your_source_url3.png",
"https://your_source_url4.png"
]
};
},
}
Options
options : determine base options
ms : setTimeout Milliseconds
type : slide | fade
appear : true | false (whether to start animation from the beginning)
loop : repeat Animation endless (animationEnd callback not fire)
animationOptions : determine Animation Options in web animation api
duration : slide duration between two element
imageOptions : determine Image options (currently support objectFit)
objectFit : contain | fill | cover | none | scale-down
Warning
Make Sure to Enable Cache in Browser!
License
MIT