vue-awesome-swiper一屏展示多张图片时自动轮播不生效
问题描述一下:如果你的现象是,设置了自动轮播,但是每次轮播几个slide后就停止轮播了。那么下面解决方式完全符合你的情况~SSR和SPA都一样,只需注意将slidesPerView的值设置成大于等于loopedSlides的值,loop设置为true。就bingo了~~简单实例如下(此处????为SSR服务端渲染):export default {data() {return {...
·
问题描述一下:
如果你的现象是,设置了自动轮播,但是每次轮播几个slide后就停止轮播了。那么下面解决方式完全符合你的情况~
SSR和SPA都一样,只需注意将slidesPerView
的值设置成大于等于loopedSlides
的值,loop
设置为true。就bingo了~~
简单实例如下(此处?为SSR服务端渲染):
export default {
data() {
return {
swiperOption: {
loopedSlides: 3,
loop: true,
autoplay: {
stopOnLastSlide: false,
delay: 1000
},
slidesPerView: 3,
},
demoList: [1, 2, 3, 4, 5, 6, 7]
};
},
};
<template>
<div
class="swiper-box"
v-swiper:mySwiper="swiperOption"
v-if="demoList.length > 0"
>
<div class="swiper-wrapper">
<div class="swiper-slide" v-for="demoValue in demoList" :key="demoValue">
{{demoValue}}
</div>
</div>
</div>
</template>
那年,我上初中了。然后信誓旦旦地跟家里说,我们老师说要买个复读机,学英语要用呢。谁知道,我转头就去买了盘周杰伦、林俊杰的磁带,插上耳机,搬把椅子,晒着太阳… 原来世界也可以是我的。 一一 Mobro
3分钟,了解天下大事
每天花3分钟在【每日全搜索】上,可尽知天下大事。
把省下来的时间留给自我技术沉淀噻~
更多推荐
已为社区贡献2条内容
所有评论(0)