Bootstrap5 Tab中Slick Slider不显示问题求助

问题现象 #

在Bootstrap5导航标签页内使用Slick Slider时，切换到非初始标签页后滑块无法正常渲染，必须调整窗口大小才能显示；调整JS引入顺序会直接导致滑块失效，纯文本内容显示正常。

问题原因 #

并非Bootstrap与Slick的JS冲突，而是隐藏状态下的标签页内容无法被Slick正确计算尺寸。初始时非激活Tab的内容是display: none，Slick初始化时无法获取容器的正确宽高，导致渲染异常。

解决方案 #

通过监听Bootstrap Tab的切换事件，在标签激活后完成滑块的初始化或尺寸刷新：

1. 给滑块容器添加统一类名方便批量处理
2. 页面加载时仅初始化激活Tab内的滑块
3. 监听shown.bs.tab事件（Tab切换完成后触发），对当前Tab内的滑块执行初始化或刷新

修改后的代码 #

HTML

<div class="container mt-5">
  <div class="row justify-content-center">
    <div class="col-8">
      <ul class="nav solution_nav mb-5">
        <li class="nav-item">
          <button class="nav-link active" data-bs-toggle="tab" data-bs-target="#tab_1" type="button" role="tab" aria-selected="true">TAB 1</button>
        </li>
        <li class="nav-item">
          <button class="nav-link" data-bs-toggle="tab" data-bs-target="#tab_2" type="button" role="tab" aria-selected="false">TAB 2</button>
        </li>
      </ul>
      <div class="tab-content">
        <div class="tab-pane fade show active" id="tab_1" role="tabpanel">
          <div class="slider slider-for main-slider">
            <img src='https://images.unsplash.com/photo-1637779827592-1a6bc47d21b3?crop=entropy&cs=srgb&fm=jpg&ixid=MnwxNDU4OXwwfDF8cmFuZG9tfHx8fHx8fHx8MTYzOTkyNzcwMg&ixlib=rb-1.2.1&q=85' alt=''>
            <img src='https://images.unsplash.com/photo-1638058393863-4ae0d0075635?crop=entropy&cs=srgb&fm=jpg&ixid=MnwxNDU4OXwwfDF8cmFuZG9tfHx8fHx8fHx8MTYzOTkyNzcwMg&ixlib=rb-1.2.1&q=85' alt=''>
            <img src='https://images.unsplash.com/photo-1638588635868-cd8290af2266?crop=entropy&cs=srgb&fm=jpg&ixid=MnwxNDU4OXwwfDF8cmFuZG9tfHx8fHx8fHx8MTYzOTkyNzc2OQ&ixlib=rb-1.2.1&q=85' alt=''>
            <img src='https://images.unsplash.com/photo-1638058393863-4ae0d0075635?crop=entropy&cs=srgb&fm=jpg&ixid=MnwxNDU4OXwwfDF8cmFuZG9tfHx8fHx8fHx8MTYzOTkyNzcwMg&ixlib=rb-1.2.1&q=85' alt=''>
          </div>
          <div class="slider slider-nav thumb-slider">
            <img src='https://images.unsplash.com/photo-1637779827592-1a6bc47d21b3?crop=entropy&cs=srgb&fm=jpg&ixid=MnwxNDU4OXwwfDF8cmFuZG9tfHx8fHx8fHx8MTYzOTkyNzcwMg&ixlib=rb-1.2.1&q=85' alt=''>
            <img src='https://images.unsplash.com/photo-1638058393863-4ae0d0075635?crop=entropy&cs=srgb&fm=jpg&ixid=MnwxNDU4OXwwfDF8cmFuZG9tfHx8fHx8fHx8MTYzOTkyNzcwMg&ixlib=rb-1.2.1&q=85' alt=''>
            <img src='https://images.unsplash.com/photo-1638588635868-cd8290af2266?crop=entropy&cs=srgb&fm=jpg&ixid=MnwxNDU4OXwwfDF8cmFuZG9tfHx8fHx8fHx8MTYzOTkyNzc2OQ&ixlib=rb-1.2.1&q=85' alt=''>
            <img src='https://images.unsplash.com/photo-1638058393863-4ae0d0075635?crop=entropy&cs=srgb&fm=jpg&ixid=MnwxNDU4OXwwfDF8cmFuZG9tfHx8fHx8fHx8MTYzOTkyNzcwMg&ixlib=rb-1.2.1&q=85' alt=''>
          </div>
        </div>
        <div class="tab-pane fade" id="tab_2" role="tabpanel">
          <div class="slider slider-for2 main-slider">
            <img src='https://images.unsplash.com/photo-1659427219844-d45d5a49780d?crop=entropy&cs=tinysrgb&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2NjIwMjE3ODg&ixlib=rb-1.2.1&q=80' alt=''>
            <img src='https://images.unsplash.com/photo-1660508344047-d535438fc3fa?crop=entropy&cs=tinysrgb&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2NjIwMjE3ODg&ixlib=rb-1.2.1&q=80' alt=''>
          </div>
          <div class="slider slider-nav2 thumb-slider">
            <img src='https://images.unsplash.com/photo-1659427219844-d45d5a49780d?crop=entropy&cs=tinysrgb&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2NjIwMjE3ODg&ixlib=rb-1.2.1&q=80' alt=''>
            <img src='https://images.unsplash.com/photo-1660508344047-d535438fc3fa?crop=entropy&cs=tinysrgb&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2NjIwMjE3ODg&ixlib=rb-1.2.1&q=80' alt=''>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

CSS

*,
*::before,
*::after {
    box-sizing: border-box;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

.solution_nav .nav-link {
    border: none;
    background: none;
    cursor: pointer;
    position: relative;
    color: #ddd;
    padding: 16px 40px;
}
.solution_nav .nav-link.active{
  color: #343434;
  border-bottom: 1px solid #343434;
}

JavaScript

// 初始化滑块的通用函数
function initSlider(mainSelector, navSelector) {
  $(mainSelector).slick({
    slidesToShow: 1,
    slidesToScroll: 1,
    arrows: false,
    fade: true,
    asNavFor: navSelector
  });
  $(navSelector).slick({
    slidesToShow: 4,
    slidesToScroll: 1,
    asNavFor: mainSelector,
    centerMode: false,
    focusOnSelect: true,
    dots: false,  
    arrows: false
  });
}

$(document).ready(function(){
  // 初始化激活Tab里的滑块
  initSlider('.tab-pane.active .slider-for', '.tab-pane.active .slider-nav');
  
  // 监听Tab切换完成事件
  $('button[data-bs-toggle="tab"]').on('shown.bs.tab', function(e) {
    const targetTab = $(e.target).data('bs-target');
    const $tabPane = $(targetTab);
    
    // 检查当前Tab里的滑块是否已初始化，未初始化则执行初始化
    if (!$tabPane.find('.main-slider').hasClass('slick-initialized')) {
      const mainSlider = $tabPane.find('.main-slider').selector;
      const thumbSlider = $tabPane.find('.thumb-slider').selector;
      initSlider(mainSlider, thumbSlider);
    } else {
      // 如果已初始化，刷新滑块重新计算尺寸
      $tabPane.find('.main-slider').slick('refresh');
      $tabPane.find('.thumb-slider').slick('refresh');
    }
  });
})

内容的提问来源于stack exchange，提问作者Harper