Swiper旋轉木馬幻燈片PerView無法正常工作

Question

我有一張幻燈片，但我的幻燈片重複三個項目！如何停止重複幻燈片？如果有1張幻燈片放映，如果是兩張幻燈片放映兩張，如果是10張幻燈片放映10：|這是我的配置

var swiper = new Swiper('.slides-per-view', { 
    pagination: '.swiper-pagination', 
    speed: 800, 
    loop: true, 
    slidesPerView: 3, 
    centeredSlides: true, 
    spaceBetween: 30, 
    grabCursor: true, 
    paginationClickable: '.swiper-pagination', 
    nextButton: '.swiper-button-next', 
    prevButton: '.swiper-button-prev' 
}); 

，這是我的HTML代碼

<div class="swiper-container slides-per-view" dir="rtl"> 
    <div class="swiper-wrapper"> 
     <div class="swiper-slide"> 
      <figure> 
       <a href="#"><img draggable="false" src="assets/pictures/activities/1.jpg" class="img-responsive" alt=""></a> 
       <figcaption class="text-light text-center"> Title</figcaption> 
       <div class="more text-center margin-bottom-30"> 
        <p class="text-blue"><i class="fa fa-calendar"></i> Date</p> 
        <a href="" class="btn btn-info-border text-dark transition-5"> Read More </a> 
       </div> 
      </figure> 
     </div> 
    </div> 
    <div class="swiper-pagination"></div> 
    <div class="swiper-button-prev"></div> 
    <div class="swiper-button-next"></div> 
</div> 

看這個圖片，請

Answer 1

你不能有循環設置爲true，slidesPerView 3，如果你只有一個瓷磚。所以這是你可以做的：

var isLoop = true; 

if($('.swiper-slide')).length < 3) { 
    isLoop = false; 
} 

var swiper = new Swiper('.swiper-container', { 
    pagination: '.swiper-pagination', 
    speed: 800, 
    loop: isLoop, //<--- set if loop is true or not 
    slidesPerView: 3, 
    centeredSlides: true, 
    spaceBetween: 30, 
    grabCursor: true, 
    paginationClickable: '.swiper-pagination', 
    nextButton: '.swiper-button-next', 
    prevButton: '.swiper-button-prev' 
});