vue中使用swiper5方式

vue使用swiper5

官网使用方法 详情 ：Swiper使用方法 - Swiper中文网 

在vue中使用 首先 npm install --save swiper@5 // 安装5.xx版本的swiper

1. 引入css js 文件

 由于在多个组件中使用 所以直接在路口文件中引入css文件

在需要使用轮播图的组件中引入js文件 

2.在需要使用轮播图的组件中生成dom结构

可以直接去swiper官网复制

3.watch监听数据，确保swiper渲染时一定有数据

 $nextTick 确保  new swiper时 一定有dom结构

($nextTick 经常与操作dom的动作一块使用，$nextTick 可以确保dom已经生成)

vue使用swiper5做一个轮播图，带有分页器、左右箭头样式

折腾了半天，可算弄好了。记成文章，防止遗忘。

1.npm安装

由于swiper5以上才支持pagination分页器换颜色，所以我们安装swiper5以及vue-awesome-swiper

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

2.所有代码

<template>
 <div>
   <div>
     <swiper :options="swiperOptions" class="my-swiper">
       <swiper-slide> <img src="../assets/img/bg_1.jpg" /> </swiper-slide>
       <swiper-slide> <img src="../assets/img/bg_2.jpg" /> </swiper-slide>
       <swiper-slide> <img src="../assets/img/bg_3.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>
   </div>
 </div>
</template>
<script>
import {Swiper, SwiperSlide} from 'vue-awesome-swiper'
import 'swiper/css/swiper.css'
export default {
 name: 'UserCenter',
 components: {
   Swiper,
   SwiperSlide
 },
 data () {
   return {
     swiperOptions: {
       // 循环
       loop: true,
       // 指示点
       pagination: {
         el: '.swiper-pagination',
         clickable: true /* 分页器点可以点击切换 */
       },
       // 方向：横向或者纵向vertical
       direction: 'horizontal',
       // 自动播放
       autoplay: {
         delay: 5000,
         disableOnInteraction: false
       },
       // 切换速度
       speed: 600,
       // 左右箭头按钮
       navigation: {
         nextEl: '.swiper-button-next',
         prevEl: '.swiper-button-prev'
       }
     }
   }
 },
 computed: {},
 mounted () {},
 methods: {}
}
</script>
<style scoped>
.my-swiper{
 width: 100％;
 height: auto;
 --swiper-navigation-color: white; /*左右箭头按钮颜色*/
 --swiper-pagination-color: white; /*pagination分页器颜色*/
}
.my-swiper img {
 width: 100％;
 height: auto;
}
</style>

最后，看成品。

来源：https://blog.csdn.net/Dzb1993/article/details/123108889