Question

我正在使用bootstrap tab＆amp; swiper slider，我有多个标签，在所有标签中都有图片滑块。除了第一个选项卡中的分页但另一个选项卡都没有工作时，滑块滑块工作正常。

基本上我正在做手机间隙项目。在此项目中，要求将图像滑块放入选项卡窗格。

这是我的代码。

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

使用swiper初始化添加以下代码

observer: true,
observeParents: true,

Answer 2

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

val producerSettings = ProducerSettings(system, new ByteArraySerializer, new StringSerializer)

Answer 3

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

Swiper Slider在Bootstrap选项卡面板

3 个答案: