Skh-slider NPM

skh-slider

Vue Slider Made of Web Animation API

Demo Page

Information

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