滑动器滑块在 Bootstrap 选项卡面板内不工作

unhi4e5o 于 2022-12-28 发布在 Bootstrap

关注(0)|答案(4)|浏览(167)

我正在使用引导标签& swiper slider，我有多个标签，在所有的标签有图像滑块。滑动滑块工作正常，除了分页在第一个标签，但另一个标签，两者都不工作。
基本上我是做电话缺口项目。在这个项目的要求是，图像滑块到标签窗格。
这是我的代码。

- 超文本标记语言**

<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
请帮帮我...

twitter-bootstrap

来源：https://stackoverflow.com/questions/33412633/swiper-slider-not-working-inside-bootstrap-tab-panel

4条答案

按热度按时间

xesrikrc1#

使用滑动器初始化添加以下代码

observer: true,
observeParents: true,

赞(0）回复(0）举报 2022-12-28

fv2wmkja2#

实际上，我遇到了同样的问题。在ul-tag中添加一个类名。Swiper必须重新初始化：

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

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

赞(0）回复(0）举报 2022-12-28

ecfdbz9o3#

必须为www.example.com事件创建一个简单的侦听器shown.bs.tab，然后使用update（）方法。

var mySwiper = new Swiper('.swiper-container', {
  loop: true,
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },
});
$('a[data-toggle="tab"]').on('shown.bs.tab', function(e) {
  var paneTarget = $(e.target).attr('href');
  var $thePane = $('.tab-pane' + paneTarget);
  var paneIndex = $thePane.index();
  if ($thePane.find('.swiper-container').length > 0 && 0 === $thePane.find('.swiper-slide-active').length) {
    mySwiper[paneIndex].update();
  }
});

赞(0）回复(0）举报 2022-12-28

rqcrx0a64#

对于Bootstrap 5.2.3，我将通过以下代码来实现：

$('a[data-bs-toggle="tab"]').on('shown.bs.tab', function (event) {
  var swiper = new Swiper(".mySwiper", {
    slidesPerView: 2,
    spaceBetween: 30,
     autoplay: {
            delay: 2500,
            disableOnInteraction: false,
          },
          pagination: {
            el: ".swiper-pagination",
            clickable: true,
          },
          navigation: {
            nextEl: ".swiper-button-next",
            prevEl: ".swiper-button-prev",
          },
  });
} );

赞(0）回复(0）举报 2022-12-28

我来回答

滑动器滑块在 Bootstrap 选项卡面板内不工作

4条答案

相关问题

热门标签

最新问答