フレームワーク7の無限スワイパー

Question

http://framework7.io/docs/swiper.htmlを使用して無限のスワイパー（Tinderなど）を構築する方法はありますか？

アイデアは、最後のスライドが「アクティブ」になっているときに新しいスライドを追加することですが、それを行うためには検索できません。

Answer 1

私はあなたが追加機能を使用し、スライドがなくなった場合にコンテンツを追加することでこれを行うことができると思います。無限のスクロールのようなものですが、コードが少し異なります。例えば

：

<div class="swiper-container"> 
<div class="swiper-wrapper"> 
    <div class="swiper-slide"><span>Slide 1</span></div> 
    <div class="swiper-slide"><span>Slide 2</span></div> 
    <div class="swiper-slide"><span>Slide 3</span></div> 
    <div class="swiper-slide"><span>Slide 4</span></div> 
</div> 
</div> 

JS

var html = ''; 
for (var i = lastIndex + 1; i <= lastIndex + itemsPerLoad; i++) { 
    html += '<div class="swiper-slide"><span>Slide '+i+'</span></div>'; 
} 
// Append new items 
$$('.swiper-wrapper').append(html); 

Answer 2

swiperプラグインは、より多くの文書とそれ自身のウェブサイトを持っています。あなたはおそらくonReachEnd(swiper)イベントを使用し、そこにmySwiper.appendSlide('<div class="swiper-slide">Slide 10"</div>')

var mySwiper = new Swiper('.swiper-container'); 

mySwiper.on('onReachEnd', function (swiper) { 
    swiper.appendSlide('<div class="swiper-slide">New Slide</div>') 
}); 

で新しいスライドを追加することができ

http://idangero.us/swiper/api/