在可摺疊元素內使用iDangero.us swiper

我試圖在可以正常工作的頁面上添加多個Swiper實例，除了可摺疊容器（Bootstrap或jQuery mobile）內的那些。只有可見的第一個面板上的Swiper工作得很好，其餘的則沒有。在可摺疊元素內使用iDangero.us swiper

看起來，如果父容器不可見，Swiper無法初始化。將不勝感激任何解決方法。

下面是示例代碼：

<div data-role="collapsibleset" data-theme="a" data-content-theme="a"> 
<div data-role="collapsible"> 
    <h3>Section 1</h3> 
     <div class="swiper-container" id="sec1"> 
     <div class="swiper-scrollbar"></div> 
     <div class="swiper-title">Section 1 header</div> 
     <div class="swiper-wrapper"> 
      <div class="swiper-slide" style="width:1250px;"> 
       <div> 
       slide 1 
       </div> 
       <div> 
       slide 2 
       </div> 
      </div> 
     </div> 
     </div> 
</div> 
<div data-role="collapsible"> 
    <h3>Section 2</h3> 
     <div class="swiper-container" id="sec2"> 
     <div class="swiper-scrollbar"></div> 
     <div class="swiper-title">Section 2 header</div> 
     <div class="swiper-wrapper"> 
      <div class="swiper-slide" style="width:1250px;"> 
       <div> 
       slide 1 
       </div> 
       <div> 
       slide 2 
       </div> 
      </div> 
     </div> 
     </div> 
</div> 
<div data-role="collapsible"> 
    <h3>Section 3</h3> 
     <div class="swiper-container" id="sec3"> 
     <div class="swiper-scrollbar"></div> 
     <div class="swiper-title">Section 3 header</div> 
     <div class="swiper-wrapper"> 
      <div class="swiper-slide" style="width:1250px;"> 
       <div> 
       slide 1 
       </div> 
       <div> 
       slide 2 
       </div> 
      </div> 
     </div> 
     </div> 
</div>

$(".swiper-container").each(function(index) { 
    var mySwiperScroll = ('#' + $(this).attr("id") + ' .swiper-scrollbar'); 
    //alert(mySwiperScroll); 
    var mySwiper = new Swiper(this,{ 
    scrollContainer: true, 
    scrollbar: { 
     container: mySwiperScroll 
    } 
    })

}）;

來源

2014-02-20 user3333329

請提供一些代碼來研究。請提供您至今嘗試過的代碼以及您的問題，因爲它可以幫助用戶提供答案。 – 2014-02-20 15:35:41

我已經添加了代碼。只有第一/可見面板上的sw子工作，其他則不。 – user3333329

這是正確的。 Swiper不會在隱形元素中初始化。當你展開它時，你應該重新整理可摺疊的swiper。在jQuery手機中有一個特殊的事件http://api.jquerymobile.com/collapsible/#event-expand

來源

2014-02-21 18:04:44

我已經嘗試過這種方法，但仍然沒有設法再次初始化Swiper。也許我做錯了什麼。希望你看看這個。 http://jsfiddle.net/2gQ4E/5/ sec2函數在展開後觸發，但swiper未初始化。 – user3333329

正如我所看到的是現在的一切作品http://jsfiddle.net/2gQ4E/7/ –

在可摺疊元素內使用iDangero.us swiper

回答

相關問題