vue3 Swiper 滚动插件

https://swiperjs.com
pnpm add Swiper

<Swiper
@swiper=“onSwiper”
@slideChange=“onSlideChange”
:slides-per-group=“4”
slides-per-view=“auto”
:space-between=“30”
>

<SwiperSlide
/Swiper>

import {Swiper, SwiperSlide} from ‘swiper/vue’
import ‘swiper/css’

const pageSize = ref(4) // 每页显示数量
const page = ref(1) // 当前页码
let useSwiper = null // swiper实例

// 初始化swiper
const onSwiper = (swiper) => {
useSwiper = swiper
}
// 滑动事件记录分页
const onSlideChange = () => {
page.value = useSwiper.activeIndex / pageSize.value + 1
}

//css
:deep .swiper-wrapper {
cursor: grab;
flex-shrink: 0;
}