Question

我使用Bootstra 4标签导航查看标签面板内的不同滑块。

适用于活动标签。但非活动选项卡中的滑块宽度为0（.slide-track）。因此，在我开始浏览选项卡之前，存在显示问题。之后，设置宽度，滑块看起来很好。

有没有办法将滑轨的宽度设置为正确的尺寸？

以下是我的代码：http://jsfiddle.net/vv4j3uz2/5/

HMTL：

<ul class="nav nav-tabs" id="myTab" role="tablist">
    <li class="nav-item"><a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Home</a></li>
    <li class="nav-item"><a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Profile</a></li>
    <li class="nav-item"><a class="nav-link" id="contact-tab" data-toggle="tab" href="#contact" role="tab" aria-controls="contact" aria-selected="false">Contact</a></li>
</ul>
<div class="tab-content" id="myTabContent">
    <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">
        <div class="slider-home">
            <div>
                <p class="h1">home 1</p>
            </div>
            <div>
                <p class="h1">home 2</p>
            </div>
            <div>
                <p class="h1">home 3</p>
            </div>
            <div>
                <p class="h1">home 4</p>
        </div>
    </div>
    <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">
        <div class="slider-profile">
            <div>
                <p class="h1">profile 1</p>
            </div>
            <div>
                <p class="h1">profile 2</p>
            </div>
            <div>
                <p class="h1">profile 3</p>
            </div>
            <div>
                <p class="h1">profile 4</p>
            </div>
            <div>
                <p class="h1">profile 5</p>
            </div>
        </div>
    </div>
    <div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">
        <div class="slider-contact">
            <div>
                <p class="h1">contact 1</p>
            </div>
            <div>
                <p class="h1">contact 2</p>
            </div>
            <div>
                <p class="h1">contact 3</p>
            </div>
        </div>
    </div>
</div>

和JS：

$('.slider-home').slick({
    dots:true,
    arrows:true,
});

$('.slider-profile').slick({
    dots:true,
    arrows:true,
});

$('.slider-contact').slick({
    dots:true,
    arrows:true,
});

Answer 1

问题是因为当一个容器被隐藏时，它的子元素无法计算它们的宽度。

为了解决这个问题，您可以在显示选项卡时实例化slick()控件。然后可以计算宽度。试试这个：

$('a[data-toggle="tab"]').on('shown.bs.tab', function() {   
  $($(this).attr('href')).find('.slider').slick({
    dots: true,
    arrows: true
  })
}).first().trigger('shown.bs.tab');

Working example

Answer 2

另一种解决方案是在显示初始化的滑块后手动对其进行刷新。
这是一个演示：

// Initialize sliders.
$('.slider').slick({
  dots: true,
  arrows: true,
});

// When a tab is shown...
$('.nav-link').on('shown.bs.tab', function() {

  // ... select the corresponding tab pane ...
  let $tabPane = $($(this).attr('href'));

  // ... and refresh its slider.
  $('.slider', $tabPane).slick('refresh');

});

.slick-prev:before,
.slick-next:before {
  color: blue;
}

.tab-pane {
  padding: 2rem 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script type="text/javascript" src="//cdn.jsdelivr.net/gh/kenwheeler/slick@1.8.1/slick/slick.min.js"></script>
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/gh/kenwheeler/slick@1.8.1/slick/slick.css" />
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/gh/kenwheeler/slick@1.8.1/slick/slick-theme.css" />

<div class="container">
  <ul class="nav nav-tabs" id="myTab" role="tablist">
    <li class="nav-item"><a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Home</a></li>
    <li class="nav-item"><a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Profile</a></li>
    <li class="nav-item"><a class="nav-link" id="contact-tab" data-toggle="tab" href="#contact" role="tab" aria-controls="contact" aria-selected="false">Contact</a></li>
  </ul>
  <div class="tab-content" id="myTabContent">
    <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">
      <div class="slider slider-home">
        <div>
          <p class="h1">home 1</p>
        </div>
        <div>
          <p class="h1">home 2</p>
        </div>
        <div>
          <p class="h1">home 3</p>
        </div>
        <div>
          <p class="h1">home 4</p>
        </div>
      </div>
    </div>
    <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">
      <div class="slider slider-profile">
        <div>
          <p class="h1">profile 1</p>
        </div>
        <div>
          <p class="h1">profile 2</p>
        </div>
        <div>
          <p class="h1">profile 3</p>
        </div>
        <div>
          <p class="h1">profile 4</p>
        </div>
        <div>
          <p class="h1">profile 5</p>
        </div>
      </div>
    </div>
    <div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">
      <div class="slider slider-contact">
        <div>
          <p class="h1">contact 1</p>
        </div>
        <div>
          <p class="h1">contact 2</p>
        </div>
        <div>
          <p class="h1">contact 3</p>
        </div>
      </div>
    </div>
  </div>
</div>

有关参考，请参阅：

Bootstrap Nav Events

shown.bs.tab
显示标签后，此事件会在标签显示上触发。使用event.target和event.relatedTarget分别定位活动选项卡和上一个活动选项卡（如果有）。

Slick Slider Methods

//手动刷新浮油的位置
$('.your-element').slick('setPosition');

.slick('refresh')也可以。

如果您使用的是Bootstrap's Collapse component，则它具有等效的events：

shown.bs.collapse
当折叠元素对用户可见时将触发此事件（将等待CSS转换完成）。

如果隐藏div（Bootstrap选项卡），滑动滑块为0

2 个答案: