skh-slider

Vue Slider Made of Web Animation API

Demo Page

Image Slider

Information

Web Animation Api

Support Browser

Install

``console
$ npm i skh-slider
`

How to Use

`js

:options="options"
:srcArr="srcArr"
:rotationEnd="rotationEnd"
:animationEnd="animationEnd"
style="width: 100%; height: 100%;"
>

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