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>

最后，看成品。