使用vue-awesome-swiper做异形轮播图

先上效果图

刚开始对着swiper官网自己摸索，引入swiper依赖启动，当然是直接报错，然后百度各种文章，是版本问题导致报错，后来用vue-awesome-swiper来做这个轮播。我用的是3.1.3的vue-awesome-swiper

第一步

npm install vue-awesome-swiper@3 --save-dev

然后就是最重要的一点 引入文件 这一步了

第二步

import { swiper, swiperSlide } from 'vue-awesome-swiper'
import 'vue-awesome-swiper/node_modules/swiper/dist/css/swiper.css'

引入css文件这一步，建议顺着node_modules插件包的路径，一不小心就是引入错误

第三步

使用vue-awesome-swiper是要用组件方式引入

components: {  swiper, swiperSlide },

使用

<swiper class="mySwiper" :options="swiperOption" ref="mySwiper">
              <!-- 添加的图片 -->
              <swiper-slide >
                <img class="swiper-slide" src="../../../assets/visualizationFrame/111.jpg" />
              </swiper-slide>
              
              <swiper-slide >
                <img class="swiper-slide" src="../../../assets/visualizationFrame/111.jpg" />
              </swiper-slide>
              <div class="swiper-pagination" slot="pagination"></div>
              
              <!-- 左右切换按钮 -->
              <!-- <div class="swiper-button-prev" slot="button-prev"></div>
              <div class="swiper-button-next" slot="button-next"></div> -->
 </swiper>

export default {
  components: {  swiper, swiperSlide },
  data() {
    return {
      swiperOption: {
        grabCursor: true,
        //可见图片张数
        slidesPerView: 2,
        // 默认选中中间一张
        centeredSlides: true,
        //无限循环
        loop: true,
        //小圆点（我此处没使用，列出供参考）
        pagination: {
          el: '.swiper-pagination',
          clickable: true,
        },
        // pagination: '.swiper-pagination',
        //自动轮播
        autoplay: {
          delay: 5000,
          stopOnLastSlide: false,
        },
        //上下按钮点击轮播效果
        navigation: {
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev',
        },
        // notNextTick: true,
        slideToClickedSlide: true,
        on: {
          click: function () {
          //需要注意的是：this 指向的是 swpier 实例，而不是当前的 vue， 因此借助 vm，来调用 methods 里的方法
            const realIndex = this.realIndex
            // 当前活动块的索引，与activeIndex不同的是，在loop模式下不会将 复制的块 的数量计算在内
            //点击可以手动切换轮播图
            vm.$refs.mySwiper.swiper.slideTo(realIndex, 300, false)
          },
        },
        //  direction: 'horizontal',
        //  spaceBetween: 4, // 在slide之间设置距离 也可以是百分比 10%
        //  centeredSlides: true, // 默认选中中间一张
        // observer: true, // 修改swiper自己或子元素时，自动初始化swiper
        // observeParents: true, // 修改swiper的父元素时，自动初始化swiper
      },
    }
  },
  mouted() {
  },
  created() {
    vm = this
  },
  methods: {},
}

总结

不能瞎抄