如何在同一頁面設置幾張圖像掃描器

我正在使用idangarus swiper。我做了一個sw and，我複製了3次。我的問題是以下幾點：當我玩（滑動）sw，，所有的滑動者也移動。我希望每個sw to都能獨自工作。我不熟悉js，所以我需要一些幫助。如何在同一頁面設置幾張圖像掃描器

js文件是：

var swiper = new Swiper('.swiper-container', { 
pagination: '.swiper-pagination', 
paginationClickable: '.swiper-pagination', 
nextButton: '.swiper-button-next', 
prevButton: '.swiper-button-prev', 
spaceBetween: 30, 
effect: 'fade' 
});

HTML文件是：

 <!-- Swiper --> 
    <div class="swiper-container"> 
     <div class="swiper-wrapper"> 
      <div class="swiper-slide" style="background-image:url(images/1.jpg)"></div> 
      <div class="swiper-slide" style="background-image:url(http://lorempixel.com/1000/1000/nightlife/2)"></div> 
      <div class="swiper-slide" style="background-image:url(http://lorempixel.com/1000/1000/nightlife/3)"></div> 
      <div class="swiper-slide" style="background-image:url(http://lorempixel.com/1000/1000/nightlife/4)"></div> 
      <div class="swiper-slide" style="background-image:url(http://lorempixel.com/1000/1000/nightlife/5)"></div> 
     </div> 
     <!-- Add Pagination --> 
     <div class="swiper-pagination swiper-pagination-white"></div> 
     <!-- Add Arrows --> 
     <div class="swiper-button-next swiper-button-white"></div> 
     <div class="swiper-button-prev swiper-button-white"></div> 
    </div>

謝謝。

來源

2016-01-20 roncha

你想要做的是創建Swiper對象的三個不同實例，並讓每個對象在頁面上引用不同的swippers。

現在通過參考與刷卡的不同部分（如分頁，箭頭，集裝箱）相關的各種類創建的對象刷卡

你要創建自定義的標識（例如，使用不同的ID爲每個部分），並創建每個Swiper引用他們各自的組件與他們各自的id。

從本質上講，你就會有一些看起來像這樣：

<div id="swiper1">// all the other divs with their respective ids</div> 
<div id="swiper2">// all the other divs with their respective ids</div> 
<div id="swiper3">// all the other divs with their respective ids</div>

然後當你創建你刷卡的對象，你會碰到這樣的：

var swiper1 = new Swiper("#swiper1", {// rest of object}); 
var swiper2 = new Swiper("#swiper2", {// rest of object}); 
var swiper3 = new Swiper("#swiper3", {// rest of object});

來源

2016-01-20 18:16:16

有什麼辦法用「這個」功能做到這一點？我的意思是，一個腳本適合所有的滑動，告訴他們玩（刷卡）只有特定的sw？？ – roncha

我不明白你的問題。「this」關鍵字不是函數，而是上下文（取決於「this」的位置）。「這個」只是一個對象:) –

嘿，對於延遲抱歉。我看到了這個答案：[鏈接]（http://stackoverflow.com/questions/30885041/idangero-us-swiper-multiple-instances），並有一個$這個對象。我試圖使用它，但沒有成功。這個腳本應該適用於所有的swipers。 – roncha

如何在同一頁面設置幾張圖像掃描器

回答

相關問題