上午把官网的合作伙伴做了,好坑,swiper 自动滚动展示的数量 slides-per-view
的两倍必须小于等于 *SwiperSlide*
组件的渲染数量,才能进行自动滚动,官网居然都没有说。
比如 slidesPerView = 6,那么 SwiperSlide 组件渲染的数量必须大于等于 6 的 2 倍,否则无法自动无限滚动!
<Swiper
@swiper="onSwiper"
:autoplay="{ delay: 0, disableOnInteraction: false, stopOnLastSlide: false }"
:modules="[Autoplay]"
:slides-per-view="6"
:loop="true"
:speed="1500"
>
<SwiperSlide v-for="(item, index) in 12" :key="index" :virtualIndex="index">
<div class="partner-card">
<img v-if="index < 8" :src="`partner/1-${index + 1}.png`" alt="" />
<img v-else :src="`partner/1-${index + 1 - 5}.png`" alt="" />
div>
<div class="partner-card">
<img v-if="index < 8" :src="`partner/2-${index + 1}.png`" alt="" />
<img v-else :src="`partner/2-${index + 1 - 5}.png`" alt="" />
div>
<div class="partner-card">
<img v-if="index < 8" :src="`partner/3-${index + 1}.png`" alt="" />
<img v-else :src="`partner/3-${index + 1 - 5}.png`" alt="" />
div>
<div class="partner-card">
<img v-if="index < 8" :src="`partner/4-${index + 1}.png`" alt="" />
<img v-else :src="`partner/4-${index + 1 - 5}.png`" alt="" />
div>
SwiperSlide>
Swiper>
:deep(.swiper-wrapper) {
transition-timing-function: linear !important; /* 没错就是这个属性 */
}