jquery - Swiper slider 在 Bootstrap 选项卡面板内不起作用

Question

我正在使用 Bootstrap 选项卡&swiper slider ，我有多个选项卡，在所有选项卡中都有图像 slider 。滑动 slider 工作正常，除了第一个选项卡中的分页，但另一个选项卡中的分页都不起作用。

基本上我正在做电话间隙项目。在此项目中，要求将图像 slider 放入选项卡 Pane 中。

这是我的代码。

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>

Javascript

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

这是我的示例 FIDDLE

请帮助我......

Answer 1

添加以下代码并进行滑动初始化

observer: true,
observeParents: true,