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

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