我试图在一个页面上添加多个 Swiper 实例，除了可折叠容器（Bootstrap 或 jQuery mobile）内的那些之外，这些实例都可以正常工作。只有第一个面板上可见的 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
}
})
});