1

折りたたみ可能なコンテナー (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
    }
  })

});

4

1 に答える 1