https://www.swiperjs.net/vue/#%E5%AE%89%E8%A3%85
demo：
https://swiperjs.com/demos
https://swiperjs.com/demos#pagination-progress
Swiper props
https://swiperjs.com/swiper-api#parameters
https://swiperjs.com/swiper-api#swiper-full-html-layout
swiper version : 11
pnpm i swiper -S
import { Swiper, SwiperSlide } from 'swiper/vue';
import 'swiper/css';
import 'swiper/css/pagination';
import { Navigation, Pagination, Scrollbar, A11y } from 'swiper/modules';
let modules = ref([Pagination,Navigation])
<swiper
class="_swiper"
v-if="!loadingItems"
:slides-per-view="1"
:space-between="50"
:modules="modules"
:pagination="paginationOptions"
navigation
@swiper="(swiper:any)=>{}"
@slideChange="()=>{}"
>
// scss
._swiper {
--swiper-pagination-bottom: 45px;
--swiper-pagination-bullet-size: 6px;
--swiper-pagination-color: #181D62;
}
navigation
https://swiperjs.com/swiper-api#pagination
左右箭頭
swiper 適配子元素寬度
._swiper-slide{
width: fit-content;
}
