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/



点赞(0) 打赏

立即下载

点击下载

评论列表 共有 0 条评论

暂无评论

微信公众账号

微信扫一扫加关注

发表
评论
返回
顶部