如何使用Bootstrap tab-panes修复Swipers的冲突？只有第一个正常工作

Question

有趣的是，通过将每个Swiper放在选项卡窗格中，只有第一个正常工作。第二个表现得非常奇怪，比如每个幻灯片宽度为100％。但当我从panes中取出它们时，它们正常工作。 我尝试了许多不同的方法！

有没有解决方案？

HTML：

<ul class="nav nav-tabs">
    <li class="active"><a data-toggle="tab" href="#brands">Brands</a></li>
    <li><a data-toggle="tab" href="#categories">Categories</a></li>
</ul>
<div class="tab-content">
    <div id="brands" class="tab-pane fade in active">
        <div class="swiper-container swiper_brands">
            <div class="swiper-wrapper">
                <div class="swiper-slide">a1</div>
                <div class="swiper-slide">a2</div>...
            </div>
        </div>
    </div>
    <div id="categories" class="tab-pane fade">
        <div class="swiper-container swiper_categories">
            <div class="swiper-wrapper">
                <div class="swiper-slide">b1</div>
                <div class="swiper-slide">b2</div>...
            </div>
        </div>
    </div>
</div>

JS：

$('.swiper_brands').swiper({
    slidesPerView: 5,
    mode: 'horizontal',
    autoplay: 0,
    spaceBetween: 15
});

$('.swiper_categories').swiper({
    slidesPerView: 5,
    mode: 'horizontal',
    autoplay: 0,
    spaceBetween: 15
});

http://jsfiddle.net/xFW8t/2896/

Answer 1

不确定确切的问题，但如果您将第二个标签项置于超时以启用滑动它可以正常工作，我认为dom尚未就绪，因为项目未在dom中显示。 更新小提琴： http://jsfiddle.net/xFW8t/2897/

  setTimeout(function() {
    $('.swiper_categories').swiper({
        slidesPerView: 3,
        mode: 'horizontal',
        autoplay: 0,
        spaceBetween: 15
    });
  }, 1000);

让我们知道它是否有帮助。