Swiper idangerous slider by view at one of one

我使用Swiper Idangerous插件創建滑塊，並且出現問題。Swiper idangerous slider by view at one of one

我會解釋我的問題： Swiper現在在分頁顯示所有項目的項目符號，並在刷卡時刷到下一個項目。

我需要的是：需要分頁只顯示頁數（不是項目），當刷卡需要看到下面的4個項目（所以4個項目滑動，然後顯示下4個項目）。

如果這可能與該插件？或有花葯可以做到這一點？

我已經添加了一個代碼，所以你可以知道我在做什麼，因爲我也需要這個來響應。

var swiper = new Swiper('.swiper-container', { 
 
     \t \t \t slidesPerView: 4, 
 
     \t \t \t loopedSlides: 4, 
 
        centeredSlides: false, 
 
     \t \t  spaceBetween: 10, 
 
     \t \t  grabCursor: true, 
 
     \t \t  loop:true, 
 
     \t \t  pagination: '.swiper-pagination', 
 
     \t   paginationClickable: true, 
 
     \t   breakpoints: { 
 
     \t    1200: { 
 
     \t     slidesPerView: 4, 
 
     \t     loopedSlides: 4, 
 
     \t     spaceBetween: 10 
 
     \t    }, 
 
     \t    1024: { 
 
     \t     slidesPerView: 3, 
 
     \t     loopedSlides: 3, 
 
     \t     spaceBetween: 10 
 
     \t    }, 
 
     \t    768: { 
 
     \t     slidesPerView: 2, 
 
     \t     loopedSlides: 2, 
 
     \t     spaceBetween: 10 
 
     \t    }, 
 
     \t    675: { 
 
     \t     slidesPerView: 1, 
 
     \t     loopedSlides: 1, 
 
     \t     spaceBetween: 20 
 
     \t    } 
 
     \t   } 
 
     \t \t });

.swiper-container { 
 
     width: 100%; 
 
     height: 300px; 
 
    } 
 
.swiper-slide { 
 
    color:#000; 
 
    text-align:center; 
 
    padding:100px 0px; 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.3.1/js/swiper.js"></script> 
 
<link href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.3.1/css/swiper.min.css" rel="stylesheet"/> 
 
    <!-- Slider main container --> 
 
    <div class="swiper-container"> 
 
     <div class="swiper-wrapper"> 
 
      <div class="swiper-slide">Slide 1</div> 
 
      <div class="swiper-slide">Slide 2</div> 
 
      <div class="swiper-slide">Slide 3</div> 
 
      <div class="swiper-slide">Slide 4</div> 
 
      <div class="swiper-slide">Slide 5</div> 
 
      <div class="swiper-slide">Slide 6</div> 
 
      <div class="swiper-slide">Slide 7</div> 
 
      <div class="swiper-slide">Slide 8</div> 
 
     </div> 
 
     <!-- If we need pagination --> 
 
     <div class="swiper-pagination"></div> 
 
    </div>

來源

2016-08-17 Dkouk

嘗試設置

slidesPerGroup: 4

來源

2017-02-05 00:21:29

這個答案應該被接受的選項。這是一個自豪的時刻，我正在瀏覽API文檔，我檢查了許多其他選項，但沒有這個。我剛剛來到這個問題，我的問題解決了。保持它的朋友。 – NullPointer

非常感謝您的留言！我對Stacknow的交流還很陌生，並且非常感謝。 –

我剛剛離開了很多，謝謝。 – Dkouk

Swiper idangerous slider by view at one of one

回答

相關問題