最新swiper使用記錄

swiper中文API
swiper英文版API 建議看此API

"vue": "^3.2.37"
"swiper": "8.3.2"

1. 安裝

   npm i swiper

2. 在組件中導入swiper

import { Swiper, SwiperSlide } from "swiper/vue";
// 這是分頁器和對應方法，swiper好像在6的時候就已經分離了分頁器和一些其他工具
import SwiperCore, { Autoplay, Navigation, Pagination, A11y } from "swiper";
SwiperCore.use([Navigation, Pagination, Scrollbar, A11y, Autoplay]);
// 引入swiper樣式，對應css 如果使用less或者css只需要把scss改為對應的即可
import "swiper/css";
import "swiper/css/navigation";
import "swiper/css/pagination";
const modules = [Autoplay, Pagination, Navigation, A11y];

特別説明SwiperCore需要通過它來使用暴露的屬性
SwiperCore.use([Navigation, Pagination, Scrollbar, A11y, Autoplay])

3. 在模板中使用

<template>
    <swiper
        :slidesPerView="1"
        :spaceBetween="30"
        :loop="true"
        :centeredSlides="true"
        :pagination="{
            clickable: true,
        }"
        :autoplay="{
            delay: 1000,
            disableOnInteraction: false,
        }"
        :navigation="true"
        :modules="modules"
        class="mySwiper"
        ref="mySwiper"
    >
        <swiper-slide v-for="(item, index) in imgList" :key="index">
        <div style="width: 100%" class="flex">
            <img
            style="width: 100%; height: 100%"
            :src="item"
            />
        </div>
        </swiper-slide>
    </swiper>
</template>
<script setup>
    // 這是分頁器和對應方法，swiper好像在6的時候就已經分離了分頁器和一些其他工具
    import SwiperCore, { Autoplay, Navigation, Pagination, A11y } from 'swiper';
    const modules = [Autoplay, Pagination, Navigation, A11y];
    import 'swiper/css'
    import 'swiper/css/navigation'
    // import 'swiper/css/pagination'
    // import 'swiper/css/bundle'
    const imgList = ref(['https://www.baidu.com/img/bdlogo.png'])
</script>

4. 部分參數説明：
   :slidesPerView="1" //每頁顯示幾個
   :spaceBetween="30" //每個間距是多少
   :loop="true" //循環滾動
   :centeredSlides="true" //值為【false】時左對齊，默認就是左對齊，值為【true】時居中對齊
   :pagination="{
   clickable: true,
   }"//點擊分頁圓點是否切換
   :autoplay="{
   delay: 1000,
   disableOnInteraction: false,
   }"//設置多少毫秒會執行一次動畫（可以理解為：翻頁 / 切換）
   :navigation="true" //左右切換箭頭
5. 自定義箭頭（注意點）

通過使用以下導入並且使用

import { useSwiper } from 'swiper/vue';
const swiper = useSwiper();
<button @click="swiper.slideNext()">next</button>

結果是未找到slideNext方法，大致看了下源碼貌似沒暴露出此方法，也或許是使用方法不對，有知道的評論留言哈

最後不在折騰，換了種方式(通過ref)能拿到對應屬性

const mySwiper = ref<null | HTMLElement>(null)
// 獲取swiper屬性
mySwiper.value?.$el.swiper
mySwiper.value?.$el.swiper.slideNext()