vue-easy-slider | 一款简单且功能简洁的vue轮播图组件

Vue Easy Slider是一个简单且功能简洁的vue轮播图组件。Vue Easy Slider提供了切换动画、切换时长等轮播组件通用的参数调节，还提供的插槽（slot）能放置任何内容。

Vue Easy Slider以移动端为主，触摸操作体验流畅，同时兼容PC端鼠标操作。Vue Easy Slider提供Vue源码，可以进行样式定制或二次开发。

使用方法

安装

如果您想使用Vue Easy Slider轮播图插件，首先您需要安装它，命令如下：

npm i -S vue-easy-slider
		

使用

<template>
  <div id="app">
    <Slider
      animation="fade"
      v-model="sliderValue"
      :duration="5000"
      :speed="1000"
    >
      <SliderItem
        v-for="(i, index) in list"
        :key="index"
        @click="changeIndex(1);"
        :style="i"
      >
        <p style="line-height: 280px; font-size: 5rem; text-align: center;">
          Page{{ index + 1 }}
        </p>
      </SliderItem>
    </Slider>
  </div>
</template>


import { Slider, SliderItem } from "vue-easy-slider";

export default {
  name: "App",
  components: {
    Slider,
    SliderItem
  },
  data() {
    return {
      list: [],
      sliderValue: 2
    };
  },
  methods: {
    changeIndex(index) {
      this.sliderValue = index;
    }
  },
  mounted() {
    setTimeout(
      () =>
        (this.list = [
          {
            backgroundColor: "#3f51b5",
            width: "100%",
            height: "100%"
          },
          {
            backgroundColor: "#eee",
            width: "100%",
            height: "100%"
          },
          {
            backgroundColor: "#f44336",
            width: "100%",
            height: "100%"
          },
          {
            backgroundColor: "#eee",
            width: "100%",
            height: "100%"
          }
        ]),
      1000
    );
  }
};


<style>
#app {
  font-family: "Avenir", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}

p {
  margin: 0;
}
</style>
		

配置参数

Vue Easy Slider轮播图插件的可用配置参数如下：

• width：轮播图的宽度，默认值为auto。
• height：轮播图的高度，默认值为300px。
• touch：是否启用触摸功能。默认值为true。
• animation：动画效果，可选值为：'normal', 'fade'，默认值为'normal'。
• autoplay：是否自动播放，默认值为true。
• stopOnHover：是否在鼠标滑过时停止播放，默认值为false。
• interval：自动播放的时间间隔，默认值为3000(ms)。
• speed：自动播放的速度，默认值为500(ms)。
• indicators：在什么地方显示圆点。可选值有：'center', 'left', 'right', false，默认值为'center'，设置为false时，隐藏圆点。
• control-btn：是否显示左右控制按钮，默认值为true。
• before-next：切换到下一个slide前的回调函数。
• before-previous：切换到前一个slide前的回调函数。

事件

Vue Easy Slider轮播图插件的可用事件如下：

• change：在slide序号发生改变时触发。
• next：在next按钮被点击时触发。
• previous：在previous按钮被点击时触发。

插槽

Vue Easy Slider轮播图插件有下面的可用插槽：

• default：slide项的内容。
• loading：Loading占位内容。

例如

<slider>
  <slider-item>
    <img src="">
    <p></p>
    <button></button>
  </slider-item>
  <div slot="loading">custom loading ...</div>
</slider>			
		

github网址：https://github.com/shhdgit/vue-easy-slider/