隐藏容器中的光滑滑块零宽度（引导选项卡）

Question

我正在使用 Bootstrap 4 选项卡导航来查看选项卡面板内的不同滑块。

它适用于活动选项卡。但非活动选项卡中的滑块的宽度为 0 ( .slide-track)。因此，在我开始浏览选项卡之前，会出现显示问题。之后，宽度被设置并且滑块看起来不错。

有什么办法可以将滑轨的宽度设置为正确的大小吗？

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

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

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

.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://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="http://cdn.jsdelivr.net/jquery.slick/1.3.15/slick.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<link href="http://cdn.jsdelivr.net/jquery.slick/1.3.15/slick.css" rel="stylesheet" />
<link href="https://kenwheeler.github.io/slick/slick/slick-theme.css" rel="stylesheet" />

<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-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-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>
</div>

在 JSFiddle 上查看

Answer 1

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

// 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 导航事件

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

• 光滑的滑块方法

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

  .slick('refresh')也有效。

• 如果您使用Bootstrap 的 Collapse 组件，它具有等效的事件：

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