如何解决滑动器与 Bootstrap 选项卡窗格的冲突？只有第一个工作正常

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 中. 更新 fiddle： http://jsfiddle.net/xFW8t/2897/

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

如果有帮助请告知。

如何解决滑动器与 Bootstrap 选项卡窗格的冲突？只有第一个工作正常

How to fix conflict of Swipers with Bootstrap tab-panes? Only 1st works correctly

jquery

swiper

bootstrap-4