vue-awesome-swiper一屏展示多张图片时自动轮播不生效

问题描述一下:
如果你的现象是,设置了自动轮播,但是每次轮播几个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

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章