视频效果

 

图片效果

 

 技术栈

Nuxt3 + Swiper11

Nuxt3 Nuxt: The Intuitive Vue Framework · Nuxt

Swiper11 Swiper - The Most Modern Mobile Touch Slider (swiperjs.com)

当然你也可以是使用nuxt-swiper 

Nuxt-Swiper GitHub - cpreston321/nuxt-swiper: Swiper.js for Nuxt

 

核心代码讲解 

transition-timing-function: linear !important;

swiper循环一次之后按照linear进行平滑过渡。默认是ease-out，ease-out会导致每次loop停顿一下。

:slidesPerView="5"

显示屏每次显示swiper-slide的个数，这里建议采用number形式ÿ