skh-slider

slide animation Made of Web Animation API with Vuejs

Usage no npm install needed!

<script type="module">
  import skhSlider from 'https://cdn.skypack.dev/skh-slider';
</script>

README

skh-slider

Vue Slider Made of Web Animation API

Demo Page

Image Slider

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