Vue3使用Swiper實(shí)現(xiàn)輪播圖示例詳解

更新時(shí)間：2023年02月12日 09:46:11 作者：朝著全棧加速前進(jìn)

這篇文章主要為大家介紹了Vue3使用Swiper實(shí)現(xiàn)輪播圖示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪

正文

Vue 或者 React 都可以使用 Swiper 來(lái)實(shí)現(xiàn)輪播圖，并且可以滿足大部分使用場(chǎng)景。

在實(shí)現(xiàn)輪播圖的過(guò)程踩了一些坑，并且由于 Vue2 和 Vue3 版本的差異，試了幾種不同的寫法，最終終于實(shí)現(xiàn)，輪播圖的基礎(chǔ)效果如下：

Swiper 的參數(shù)

slidesPerView：每次顯示幾個(gè)輪播圖
spaceBetween：每個(gè)輪播圖之間的間距（單位：px）
loop：是否循環(huán)滾動(dòng)
centeredSlides：是否居中對(duì)齊（true:居中，false：左對(duì)齊），默認(rèn) false 左對(duì)齊，
autoplay：是否自動(dòng)播放
navigation：是否左右切換箭頭
pagination：分頁(yè)配置
- clickable：在點(diǎn)擊分頁(yè)圓點(diǎn)的時(shí)候，是否進(jìn)行切換
scrollbar：顯示滾動(dòng)條
- draggable：滾動(dòng)條可拖動(dòng)
autoplay：切換圖片的頻率（毫秒為單位）
- delay：切換的時(shí)間（單位：毫秒ms）
- disableOnInteraction：滑動(dòng)圖片后不禁用自動(dòng)播放 delay: 2500, disableOnInteraction: false,

其他參數(shù)配置可參考官方 API：Swiper

代碼實(shí)現(xiàn)

<template>
  <div class="swiperbox">
    <swiper
      :slidesPerView="1"
      :spaceBetween="30"
      :loop="true"
      :centeredSlides="true"
      :pagination="{ clickable: true}"
      :autoplay="{ delay: 2500, disableOnInteraction: false}"
      :navigation="true"
      :modules="modules"
    >
      <swiper-slide><img src="@/assets/images/swiper1.png" alt="" /></swiper-slide>
      <swiper-slide><img src="@/assets/images/swiper2.png" alt="" /></swiper-slide>
    </swiper>
  </div>
</template>

<script setup>
import { Swiper, SwiperSlide } from 'swiper/vue' // swiper 所需組件
import { Autoplay, Navigation, Pagination, A11y } from 'swiper'// 分頁(yè)器
// import 'swiper/swiper-bundle.css'
import 'swiper/css'
import 'swiper/css/navigation'
import 'swiper/css/pagination'

const modules = [Autoplay, Pagination, Navigation, A11y]
</script>

注：