swiper插件的使用

1.安装

npm install vue-awesome-swiper --save

2.全局引用（main.js）

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

3.在组件中引用

import { swiper, swiperSlide, directive } from "vue-awesome-swiper";
import "swiper/swiper-bundle.css";
export default {
  components: {
    swiper,
    swiperSlide,
  },
}

组件代码

<template>
  <div class="app">
    <swiper class="swiper" :options="swiperOption" >
        <swiper-slide v-for="(item, index) in banners" :key="index">
            <div class="app_img">{{ item.name }}</div>
        </swiper-slide>
      <div class="swiper-button-prev" slot="button-prev"></div>
      <div class="swiper-button-next" slot="button-next"></div>
    </swiper>
  </div>
</template>

data() {
    return {
      banners: [
        { name: "11111" },
        { name: "2222" },
        { name: "333" },
        { name: "44444" },
        { name: "55555" },
      ],
      // 轮播图
      swiperOption: {
          slidesPerView: 3, // 每页展示几条数据
          autoplay: true, // 是否自动播放
          navigation: {
             nextEl: '.swiper-button-next',
             prevEl: '.swiper-button-prev'
          },
          observer: true,
          // observeParents: true,
      },
    };
  },

样式可以按照自己的需要写哦

这样一个完整的轮播图就出来了，但是会遇到好多坑

坑1：完成组件安装，引入，注册后，却报错：

Module not found: Error: Can't resolve 'swiper/css/swiper.css' in ...

这是因为版本问题

解决方式如下：

import 'swiper/css/swiper.css'

修改为：

import 'swiper/swiper-bundle.css'

参考：https://github.com/surmon-china/vue-awesome-swiper

// import style (>= Swiper 6.x)
import 'swiper/swiper-bundle.css'

// import style (<= Swiper 5.x)
import 'swiper/css/swiper.css'

坑2：左右箭头点击失效的情况

这还是因为vue-awesome-swiper插件包的版本问题

解决方式如下：

npm uninstall vue-awesome-swiper --save

npm install vue-awesome-swiper@3.1.3 --save

安装完3.1.3的版本后，重新启动查看就解决了

坑3：运行项目时报错Cannot set property 'params' of undefined

因为版本间引入的语句不一致导致的

解决方式如下：

import { Swiper, SwiperSlide, directive } from 'vue-awesome-swiper'

修改为：

import { swiper, swiperSlide, directive } from "vue-awesome-swiper";

注意：全局和组件局部引入的都要修改，components里的也别忘了

最后附上轮播图种类网址：https://github.surmon.me/vue-awesome-swiper/
里面有各种各样的轮播图，可以直接复制代码，然后改成自己想要的就ok了~

到这里我遇到的坑解决完了，轮播图也可以正常使用了，如果大家有新的问题可以一起讨论。