在vue框架里运用swiper写轮播图

1、安装插件

npm install vue-awesome-swiper --save

2、在main.js中引入

import VueAwesomeSwiper from 'vue-awesome-swiper'
Vue.use(VueAwesomeSwiper /* { default global options } */)
import 'swiper/dist/css/swiper.css' 

3、在页面中使用

html:
<swiper :options="swiperOption" ref="indexswiper">
  <swiper-slide v-for="(item,index) in newList" :key="index">
    <img :src="item.image" alt="" />
  </swiper-slide>
</swiper>
<!--分页器-->
<div class="swiper-button-prev" slot="button-prev"></div>
<div class="swiper-button-next" slot="button-next"></div>

然后在data里定义轮播图

data () {
    return {
        swiperOption: {
            // slidesPerView设置容器能够显示的slides数量， auto自动根据slides的宽度来设定数量
            slidesPerView: 'auto',
            // 为true时活动块居中，而不是默认状态下的居左
            centeredSlides: true,
            // slide之间的距离
            spaceBetween: 40,
            // 设定初始化时slide的索引
            initialSlide: 0,
            // 滑动之后的回调函数
            // 还有很多参数
            // loop:true  循环
            // autoplay:true 自动播放
            // effect: 'flip'   设置轮播
            // speed: 4000  滑动速度
            // direction: 'horiziontal'  滑动方向
            // grabCursor:true 鼠标覆盖Swiper时指针会变成手掌形状，拖动时指针会变成抓手形状
            on: {
                slideChangeTransitionEnd: function() {
                  // 切换结束时，告诉我现在是第几个slide
                  if (self.$refs.indexswiper.swiper) {
                    self.curIndex = self.$refs.indexswiper.swiper.activeIndex
                  }
                }
            }
        }
    }
}