vue中使用swiper5方式

更新時間：2023年05月18日 08:39:16 作者：閃電松鼠~

這篇文章主要介紹了vue中使用swiper5方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教

vue使用swiper5

官網(wǎng)使用方法詳情：Swiper使用方法 - Swiper中文網(wǎng)

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

1. 引入css js 文件

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

在需要使用輪播圖的組件中引入js文件

2.在需要使用輪播圖的組件中生成dom結(jié)構(gòu)

可以直接去swiper官網(wǎng)復(fù)制

3.watch監(jiān)聽數(shù)據(jù)，確保swiper渲染時一定有數(shù)據(jù)

$nextTick 確保 new swiper時一定有dom結(jié)構(gòu)

($nextTick 經(jīng)常與操作dom的動作一塊使用，$nextTick 可以確保dom已經(jīng)生成)

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>
        <!-- 指示點(diǎn) -->
        <div class="swiper-pagination"  slot="pagination"></div>
        <!-- 左右導(dǎo)航欄 -->
        <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: {
        // 循環(huán)
        loop: true,
        // 指示點(diǎn)
        pagination: {
          el: '.swiper-pagination',
          clickable: true /* 分頁器點(diǎn)可以點(diǎn)擊切換 */
        },
        // 方向：橫向或者縱向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>

最后，看成品。