如何在Vue3中使用Swiper？

介紹

在vue3 中使用swiper, 實現輪播圖的效果；如果元件樣式等模組引入不當，很有可能導致，頁面無效果；或想要的箭頭或切換效果異常問題。具體使用方式如下所示：

使用方式

使用指令npm install swiper 安裝swiper外掛程式；

在main.js裡使用樣式文件，如下所示：

import App from './App.vue'
import router from './router'
import VueAwesomeSwiper from 'vue-awesome-swiper';
import 'swiper/css';
createApp(App).use(VueAwesomeSwiper).use(router).mount('#app')

在使用的頁面，引入需要使用到的元件，例如常用的左右切換箭頭，小圓點指示器等；如下所示：

import { Swiper, SwiperSlide } from 'swiper/vue'
// 引入swiper样式（按需导入）
import 'swiper/css/pagination' // 轮播图底面的小圆点
import 'swiper/css/navigation' // 轮播图两边的左右箭头
// import 'swiper/css/scrollbar'  // 轮播图的滚动条， 轮播图里一般不怎么会使用到滚动条，如果有用到的话import导入就行
// 引入swiper核心和所需模块
import { Autoplay, Pagination, Navigation, Scrollbar } from 'swiper'

const navigation = ref({
  nextEl: ".swiper-button-next",
  prevEl: ".swiper-button-prev",
});
// 在modules加入要使用的模块
const modules = [Autoplay, Pagination, Navigation, Scrollbar]
const prevEl = (item, index) => {
  // console.log('上一张' + index + item)
};
const nextEl = () => {
  // console.log('下一张')
};
// 更改当前活动swiper
const onSlideChange = (swiper) => {
// swiper是当前轮播的对象，里面可以获取到当前swiper的所有信息，当前索引是activeIndex
  console.log(swiper.activeIndex)
}

在頁面中使用元件和相關的模組

<swiper
    :modules="modules"
	:loop="true"
	:slides-per-view="1"
	:space-between="50"
	:autoplay="{ delay: 4000, disableOnInteraction: false }"
	:navigation="navigation"
	:pagination="{ clickable: true }"
	:scrollbar="{ draggable: false }"
   	class="swiperBox"
   	@slideChange="onSlideChange"
>
    <swiper-slide>Slide 1</swiper-slide>
    <swiper-slide>Slide 2</swiper-slide>
    <swiper-slide>Slide 3</swiper-slide>
    <div class="swiper-button-prev" @click.stop="prevEl(item, index)" />
    <!--左箭头。如果放置在swiper外面，需要自定义样式。-->
    <div class="swiper-button-next" @click.stop="nextEl" />
    <!--右箭头。如果放置在swiper外面，需要自定义样式。-->
    <!-- 如果需要滚动条 -->
    <!-- <div class="swiper-scrollbar"></div> -->
</swiper>

#參數介紹：

modules：

• loop： 是否循環播放

• #slides-per-view：控制一次顯示幾張輪播圖

• space-between： 每張輪播圖之間的距離，該屬性不可以和margin 屬性同時使用;

• autoplay： 是否自動輪播， delay為間隔的毫秒數；disableOnInteraction#屬性預設是true，也就是當使用者手動滑動後停用自動播放， 設定為false後，將不會停用，每次手動觸發後會重新啟動自動播放。

• navigation： 定義左右切換箭頭

• #pagination： 控制是否可以點選圓點指示器切換輪播

• scrollbar: 是否顯示輪播圖的捲軸，draggable設定為 true就可以拖曳底部的捲軸（輪播當中，一般不怎麼會使用到這個屬性）

#

以上是如何在Vue3中使用Swiper？的詳細內容。更多資訊請關注PHP中文網其他相關文章！