Kr-vue-swiper NPM

kr-vue-swiper

一个基于Vue的轮播图组件。应用于鲸准·洞见的门户

Usage

  npm install --save kr-vue-swiper

  import { swiper, slide} from 'kr-vue-swiper';
  export default {
    components: {
      swiper,
      slide
    }
  }

  <swiper ref="swiper" v-if="list.length > 0"  @change="getNum">
    <slide v-for="(item,index) in list"  :key="index" @clickSlide="show">
      <img :src="item.img" >
    </slide>
  </swiper>

图片自动轮播效果如下图：

点击轮播点效果如下图：

点击左右箭头效果如下图：箭头播

API

参数	说明	类型	默认值
height	轮播图的高度	string	300px
autoPlay	是否自动奇幻	boolean	true
interval	自动切换的时间间隔，单位为毫秒	number	1000
duration	图片切换的所用时间，单位为毫秒	number	500
showIndicator	是否显示指示器	boolean	true
showArrow	是否显示左右箭头	boolean	true