vue-awesome-swiper

vue2.0

npm install swiper vue-awesome-swiper --save

或者

npm install swiper@5.4.1 vue-awesome-swiper@4.1.1 --save

main.js中添加

import VueAwesomeSwiper from 'vue-awesome-swiper'
Vue.use(VueAwesomeSwiper)
import 'swiper/css/swiper.css'

templete里

    <swiper
      :options="swiperOption"
      @swiper="onSwiper"
      @slideChange="onSlideChange"
      ref="mySwiper">
        <swiper-slide>111</swiper-slide>
        <swiper-slide>222</swiper-slide>
    </swiper>

script里

  computed: {
    swiper () {
      return this.$refs.mySwiper.$swiper
    }
  },
data(){
    return{
    index:1,
      swiperOption: {
        slidesPerView: 1,
        // 设置分页器
        pagination: {
          el: '.swiper-pagination',
          // 设置点击可切换
          clickable: true
        },
      }
}}，
methods: {
    onSwiper () {
      
    },
    onSlideChange () {
      this.index = !this.index
    },
    onActive(index){
      this.index = !index
      this.swiper.slideTo(index,0,false)
    }
  }

注意vue-awesome-swiper目前只适合vue2.0