Swiper Slider在Bootstrap选项卡面板中不起作用

Question

我正在使用引导程序选项卡和滑动器滑块，我有多个选项卡，在所有选项卡中都有图像滑块。滑动滑块工作正常，除了第一个选项卡中的分页功能外，另一个选项卡均不工作。

基本上我在做电话缺口项目。在此项目中，要求图像滑块滑入选项卡窗格。

这是我的代码。

的HTML

<div class="container">
        <!-- Nav tabs -->
        <ul class="nav nav-tabs" role="tablist">
            <li class="active">
                <a href="#Apparel" role="tab" data-toggle="tab">
                    <i class="fa fa-home"></i> Apparel
                </a>
            </li>
            <li>
                <a href="#Electronic" role="tab" data-toggle="tab">
                    <i class="fa fa-user"></i> Electronic
                </a>
            </li>
            <li>
                <a href="#Furniture" role="tab" data-toggle="tab">
                    <i class="fa fa-envelope"></i> Furniture
                </a>
            </li>
            <li>
                <a href="#Mobile" role="tab" data-toggle="tab">
                    <i class="fa fa-cog"></i> Mobile
                </a>
            </li>
        </ul>
    </div>
    <!-- Tab panes -->
    <div class="tab-content">
        <div class="tab-pane fade active in" id="Apparel">
            <div class="swiper-container">
                <div class="swiper-wrapper">
                    <div class="swiper-slide">Apparel Image 1</div>
                    <div class="swiper-slide">Apparel Image 2</div>
                    <div class="swiper-slide">Apparel Image 3</div>
                </div>
                <!-- Add Pagination -->
                <div class="swiper-pagination"></div>
            </div>
        </div>
        <div class="tab-pane fade" id="Electronic">
            <div class="swiper-container">
                <div class="swiper-wrapper">
                    <div class="swiper-slide">Electronic Image 1</div>
                    <div class="swiper-slide">Electronic Image 2</div>
                    <div class="swiper-slide">Electronic Image 3</div>
                </div>
                <!-- Add Pagination -->
                <div class="swiper-pagination"></div>
            </div>
        </div>
        <div class="tab-pane fade" id="Furniture">
            <div class="swiper-container">
                <div class="swiper-wrapper">
                    <div class="swiper-slide">Furniture Image 1</div>
                    <div class="swiper-slide">Furniture Image 2</div>
                    <div class="swiper-slide">Furniture Image 3</div>
                </div>
                <!-- Add Pagination -->
                <div class="swiper-pagination"></div>
            </div>
        </div>
        <div class="tab-pane fade" id="Mobile">
            <div class="swiper-container">
                <div class="swiper-wrapper">
                    <div class="swiper-slide">Mobile Phone Image 1</div>
                    <div class="swiper-slide">Mobile Phone Image 2</div>
                    <div class="swiper-slide">Mobile Phone Image 3</div>
                </div>
                <!-- Add Pagination -->
                <div class="swiper-pagination"></div>
            </div>
        </div>
    </div>

Java脚本

var swiper = new Swiper('.swiper-container', {
    pagination: '.swiper-pagination',
    paginationClickable: true,
    spaceBetween: 30,
    autoplay: 2500,
});

这里是我的榜样FIDDLE

请帮我....

Answer 1

将以下代码添加到swiper初始化中

observer: true,
observeParents: true,

Answer 2

事实上，我也有同样的问题。将类名添加到 ul 标记。Swiper 必须重新初始化：

$(".class-name li").on("click",function(){ 
   reinitializeSwiper(swiper);
});

function reinitializeSwiper(swiper) {
    setTimeout(function () {
        swiper.update();       
    }, 400);
}