Question

我试图在一个页面上添加多个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
    }
  })

}）;

Answer 1

这是对的。 Swiper不会在隐形元素中初始化。您应该在展开时重新使用可折叠内部的swiper。在jQuery mobile http://api.jquerymobile.com/collapsible/#event-expand

中有一个特殊事件

在可折叠元素中使用iDangero.us swiper

1 个答案: