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

Question

我正在使用 bootstrap 选项卡和 swiper 滑块，我有多个选项卡，在所有选项卡中都有图像滑块。除了第一个选项卡中的分页和另一个选项卡中的分页外，滑动滑块工作正常，两者均无效。

基本上我在做phone-gap项目。在此项目中，要求图像滑块进入选项卡窗格。

这是我的代码。

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,

Answer 2

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

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

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

Answer 3

您必须为 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();
  }
});

Answer 4

对于 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",
          },
  });
} );

Answer 5

Дополню проблему и решение проблемы:

При переключении между табами, перестаёт работать Автозапуск!

Решение:

我会添加问题和解决问题的方法：

在选项卡之间切换时，自动运行停止工作！

解决问题：

$("li[role='presentation']").children("a").on("click",function () {
    var gallerySwiper = $('.swiper-container');
    $.each(gallerySwiper, function( index, value ) {
      value.swiper.stopAutoplay();
      value.swiper.startAutoplay();
    });
});