在Vue中使用swiper轮播图插件

第一步安装包:

                在当前项目目录下执行cmd命令行并执行以下代码

//安装指定版本
cnpm install vue-awesome-swiper@4.1.1 swiper@5.4.5  --save

第二步创建模块:

                在plugins文件夹中新建文件swiper.js文件引入以下代码

import Vue from 'vue'
import VueAwesomeSwiper from 'vue-awesome-swiper'
// import style (<= Swiper 5.x)
import 'swiper/css/swiper.css'
Vue.use(VueAwesomeSwiper)

第三步执行模块:

                在main.js中执行模块

// 引入安装的轮播图的插件的文件(就是让这个文件中的代码执行一次)
import './plugins/swiper'

第四步使用:

                在指定地方使用轮播图

<swiper ref="mySwiper" :options="{
     //配置属性,具体参数设置可参照官方文档
      slidesPerView: 5,
      slidesPerGroup: 5,
      // 如果需要前进后退按钮
      navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
      },
    }"
  >
  //遍历图片
    <swiper-slide v-for="(keys, index) in skuImageList" :key="index">
      <img :src="keys.imgUrl"
      @click="changeIndex(index)"
      :class="{active:index === Index}"
    /></swiper-slide>
    //左右按钮
    <div class="swiper-button-prev" slot="button-prev"></div>
    <div class="swiper-button-next" slot="button-next"></div>
  </swiper>