在 vue-cli 项目中使用 vue-awesome-swiper 实现轮播效果

1\ 安装

npm install vue-awesome-swiper --save

// 如果安装某一确定版本的可以通过 @版本号 实现
// npm install vue-awesome-swiper@版本号 --save

2\ 引入

// 在main.js中全局引入
import Vue from "vue";

import VueAwesomeSwiper from 'vue-awesome-swiper'

import 'swiper/dist/css/swiper.css'

Vue.use(VueAwesomeSwiper)


// 或在对应的组件中局部引入
import 'swiper/dist/css/swiper.css'
 
import { swiper, swiperSlide } from 'vue-awesome-swiper'
 
export default {
  components: {
    swiper,
    swiperSlide
  }
}

// 其他引入方式可参考 vue-awesome-swiper 官网

3\ 使用

支持swiper官网里的方法和组件，示例：

<template>
  <swiper :options="swiperOption">
  <!-- v-for="(item, index) in auditData" :key="index" -->
    <swiper-slide>
      <img src="./imgs/s_wsrbsc.png" alt />
    </swiper-slide>
    <swiper-slide>
      <img src="./imgs/s_gaxtcxbyz.png" alt />
    </swiper-slide>
    <swiper-slide>
      <img src="./imgs/s_ycdk.png" alt />
    </swiper-slide>
    <swiper-slide>
      <img src="./imgs/s_cxcl.png" alt />
    </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>
     <!-- 导航条-->
    <div class="swiper-scrollbar"   slot="scrollbar"></div>
  </swiper>
</template>

<script>
export default {
  data() {
    return {
		swiperOption: {
	        navigation: {
	          nextEl: ".swiper-button-next",
	          prevEl: ".swiper-button-prev"
	        },
	        slidesPerView: 3,
	        freeMode: true
	      },
	}
  }
}
</script>

备注：
vue-awesome-swiper 官网
swiper 中文官网