Framework7中的無限Swiper

Question

有無論如何通過使用此http://framework7.io/docs/swiper.html來構建無限Swiper（如Tinder）？

這個想法是當最後一張幻燈片「活躍」時添加一張新幻燈片，但無論如何我無法找到。

Answer 1

我認爲你可以通過使用append函數來做到這一點，並追加你的內容，如果沒有更多的幻燈片。像無限滾動但有一點不同的代碼。

例如：

<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

的刷卡插件有它自己的網站有很多更多的文檔。

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

你也許可以使用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>') 
});