vue2.0轮播图插件swiper

下载插件vue-awesome-swiper

npm install vue-awesome-swiper --save

下载插件swiper

npm install swiper --save // 下载这个是要用里面的css

引用

// 全局引用 在最外层的index.js或main.js 中调用
import VueAwesomeSwiper from 'vue-awesome-swiper'
// 引用css
import 'swiper/dist/css/swiper.css'
// 挂载到vue实例上
Vue.use(VueAwesomeSwiper)
// 在组件中引用
import { swiper, swiperSlide } from 'vue-awesome-swiper'
export default {
    components: {
      swiper,
      swiperSlide
}
// html  swipersuccess为配置
<swiper :options="swipersuccess" class="swiper-wrapper" ref="mySwiper"> 
   <swiper-slide v-for="item in customerData" :key="item.id" >            
      <div class="swiper-slide" :id="item.id" @click="toCaseDetail(item)">
        <div class="slide-center">                  
            <img :src="item.outUrl" alt="">                
        </div>                
        <div class="slide-title">                  
            <span>{{item.name}}</span>
        </div> 
        <div class="slide-content">                  
            <span>{{item.desc}}</span>
        </div>            
      </div>        
    </swiper-slide>    
</swiper>
// 数据
swipersuccess: {
    grabCursor: true,
    watchSlidesProgress: true,
    centeredSlides: true,
    loop: true,
    slidesPerView: 3, 
    spaceBetween: '1%',
    // slideToClickedSlide: true,  // 不生效自己写
    autoplay: {
        delay: 3000,//自动播放速度
        disableOnInteraction: false//鼠标移上去时是否还继续播放
    },
    // 左右点击
    navigation: {
      nextEl: '.customer-right-btn',
      prevEl: '.customer-left-btn', 
    },
    on: {
      slideChangeTransitionEnd: function(){
        // 把点击的下标传过去
        // that.slideTitle(this.realIndex);
        // console.log(this.realIndex);
        that.DEvent.trigger('getIndexCallback', this.realIndex);
      }
    }，
   //分页器设置         
   pagination: {
       el: '.swiper-pagination',
       clickable :true
   }
}
复制代码

注意事项 1.在data中的 on里面的this的事件是你配置了才有的，如果想自己调用swiper插件里面提供的方法，需要在计算属性中声明（如做划入停止自动轮播，划出开始自动轮播）

computed: {
  swiper() {  
  // $refs为vue的语法
      return this.$refs.mySwiper.swiper; 
  }
},
复制代码

2.有些api可能不会生效，要自己去写，比如点击两边滑到中间，可以自己添加事件

slideAll.on('mouseenter', function() {
  slideAll.map(function(num, item) {
    $(slideAll[num]).removeClass('swiper-slide-active');
  })
  $(slideAll[slideAll.index(this)]).addClass('swiper-slide-active');
  // $(slideAll[slideAll.index(this)]).sibling().removeClass('swiper-slide-active');
});
复制代码

swiper官方文档