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' 
});