介紹
在 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就可以拖動底部的滾動條（輪播當中，一般不怎么會使用到這個屬性）
