スワイパースライダー - 複数行スライドの無限ループ

Question

私はスワイパーをiDangero.usで使用していますが、複数列スライドの無限ループを作成するのが難しいです。私は30枚の画像を持っていて、2枚のスライドに3枚の5枚にグループ分けする必要があります。 loopを設定すると、達成したいグリッド内のスライドがレンダリングされ、矢印をクリックすると、スライドが正しくスライドします。しかし、スライドが無限になるようにする必要があります。最後に到達すると、最初のスライドの元の15枚のイメージに戻ります。 trueに設定すると、これが破棄されます。

私は間違っていますか？このプラグインでこれを行うことは可能ですか？

以下のスニペットとJSFiddle。

ご協力いただければ幸いです。

感謝:)

var swiper = new Swiper('.swiper-container', { 
 
    // loop: true, 
 
    prevButton: '.swiper-button-prev', 
 
    nextButton: '.swiper-button-next', 
 
    slidesPerView: 5, 
 
    spaceBetween: 15, 
 
    slidesPerColumn: 3, 
 
    slidesPerColumnFill: 'row', 
 
    slidesPerGroup: 15 
 
});

* { 
 
    box-sizing: border-box; 
 
} 
 

 
html, 
 
body { 
 
    margin: 20px 0; 
 
    padding: 0; 
 
    font-family: Arial, sans-serif; 
 
} 
 

 
.container { 
 
    width: 100%; 
 
    max-width: 1170px; 
 
    padding: 0 15px; 
 
    margin: 0 auto; 
 
} 
 

 
.img-responsive { 
 
    display: block; 
 
    max-width: 100%; 
 
    height: auto; 
 
} 
 

 
.swiper-slide span { 
 
    position: absolute; 
 
    top: 15px; 
 
    left: 15px; 
 
    background-color: black; 
 
    color: white; 
 
    padding: 6px; 
 
    display: block; 
 
    font-size: 20px; 
 
    width: 35px; 
 
    height: 35px; 
 
    text-align: center; 
 
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.1/css/swiper.min.css" rel="stylesheet"/> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.1/js/swiper.min.js"></script> 
 

 
<div class="container"> 
 
    <div class="swiper-container"> 
 
     <div class="swiper-wrapper"> 
 
      <script> 
 
       for (i = 1; i <= 30; i++) { 
 
        document.write('<div class="swiper-slide"><img src="http://placehold.it/240x240" class="img-responsive"><span>' + i + '</span></div>'); 
 
       } 
 
      </script> 
 
     </div> 
 

 
     <div class="swiper-button-prev swiper-button-white"></div> 
 
     <div class="swiper-button-next swiper-button-white"></div> 
 
    </div> 
 
</div>

JSフィドル：http://codepen.io/aethyrion/pen/mRVwzE

Answer 1

再帰何をしたいとも呼ばれます。スライドを再インスタンス化してからスライドをループする関数を作成し、関数の最後に関数を再度呼び出します。これにより、同じスライドのループが再帰的に呼び出されます。

しかし、あなたは私が考えると思われるいくつかの停止点を持ちたいと思うでしょう。もしあなたがしなければ、最終的には記憶がなくなるでしょう。

このループを実行し、それをあなたのhtmlのscriptタグに追加する関数を作成します。