vue使用swiper遇到版本出错的问题

先安装

npm install swiper@5.x.x //指定版本 6.0以上很多功能不能用
npm install swiper vue-awesome-swiper --save

后引入main.js中 我这里是全局引入

import Vue from 'vue'
import VueAwesomeSwiper from 'vue-awesome-swiper'
// import style (<= Swiper 5.x)
import 'swiper/css/swiper.css'
Vue.use(VueAwesomeSwiper, /* { default options with global component } */)

HTML

 <swiper ref="mySwiper" :options="swiperOption">
        <swiper-slide class="swiper-slide" v-for="(item, index) in ListPic" :key="index">
          <div style="display: flex; align-items: center; justify-content: center; height: 450px">
            <el-image style="width: auto; height: auto" :src="item" fit="cover"></el-image>
          </div>
        </swiper-slide>
        <!-- 分页器 -->
        <div class="swiper-pagination" slot="pagination"></div>
        <!-- 左右箭头 -->
        <!-- 左右事件可以去掉了 引入swiper6.0 以上版本需要自己写所以... -->
        <div class="swiper-button-prev" slot="button-prev" @click="prev"></div>
        <div class="swiper-button-next" slot="button-next" @click="next"></div>
</swiper>

JS

   data() {
    return {
      //走马灯
      swiperOption: {
        //显示分页
        pagination: {
          el: '.swiper-pagination',
          clickable: true,
        },
        //设置点击箭头
        navigation: {
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev',
          hideOnClick: true,
        },
        //自动轮播
        autoplay: {
          delay: 1000,
          disableOnInteraction: false,
          waitForTransition: false,
        },
        //开启循环模式
        loop: true, //自动循环
        speed: 1000, //自动播放 一秒滑动一次
      },
    };
  },
   methods: {
    // 走马灯 左右按钮事件 
    // swiper6.0 以上要自己写 6.0 以下可以去掉 我这里为了做记录就不去掉了 555~
    prev() {
      this.$refs.mySwiper.$swiper.slidePrev();
    },
    next() {
      this.$refs.mySwiper.$swiper.slideNext();
    },
 }

中途版本出错可以这样搞

npm uninstall swiper --save-dev //卸载
npm install swiper --save-dev //安装 但永远都是最新版本 可以用下面的
npm install swiper@5.x.x //指定自己需要的版本号 

本文地址：https://blog.csdn.net/weixin_44860425/article/details/110195709