折りたたみ可能なコンテナー (Bootstrap または jQuery モバイル) 内にあるものを除いて、正常に動作する 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
}
})
});