Slick Slider 不适用于 Bootstrap 选项卡

Question

我想使用光滑的滑块滑动图像。我使用了 Bootstrap 选项卡菜单，每个选项卡都必须正确显示一个光滑的滑块。但我有一个问题。第一个选项卡内容显示光滑的滑块没有任何问题，但是当我单击第二个选项卡时它只显示一个图像。它不能正常工作。我该如何解决这个问题？

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <title>Focus Education</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.css" integrity="sha512-wR4oNhLBHf7smjy0K4oqzdWumd+r5/+6QO/vDda76MW5iug4PT7v86FoEkySIJft3XA0Ae6axhIvHrqwm793Nw==" crossorigin="anonymous" referrerpolicy="no-referrer"
  />
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick-theme.min.css" integrity="sha512-17EgCFERpgZKcm0j0fEq1YCJuyAWdz9KUtv1EjVuaOz8pDnh/0nZxmU6BBXwaaxqoi9PQXnRWqlcDB027hgv9A==" crossorigin="anonymous" referrerpolicy="no-referrer"
  />
</head>
<style>
  * {
    padding: 0;
    margin: 0;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
  }
  
  body {
    padding: 15px;
    background-color: #35bb60;
  }
  
  div.your-class {
    opacity: 1;
  }
  
  .nav-tabs .nav-link {
    color: #fff;
  }
  
  .wrap-modal-slider {
    padding: 0 30px;
    opacity: 0;
    transition: all 0.3s;
  }
  
  .wrap-modal-slider.open {
    opacity: 1;
  }
  
  .your-class {
    width: 726px;
    margin: 0 auto;
    position: relative;
  }
  /* Arrows */
  
  .slick-prev,
  .slick-next {
    font-size: 0;
    line-height: 0;
    position: absolute;
    top: 50%;
    display: block;
    width: 20px;
    height: 20px;
    padding: 0;
    -webkit-transform: translate(0, -50%);
    -ms-transform: translate(0, -50%);
    transform: translate(0, -50%);
    cursor: pointer;
    color: transparent;
    border: none;
    outline: none;
    background: transparent;
  }
  
  .slick-prev:hover,
  .slick-prev:focus,
  .slick-next:hover,
  .slick-next:focus {
    color: transparent;
    outline: none;
    background: transparent;
  }
  
  .slick-prev:hover:before,
  .slick-prev:focus:before,
  .slick-next:hover:before,
  .slick-next:focus:before {
    opacity: 1;
  }
  
  .slick-prev.slick-disabled:before,
  .slick-next.slick-disabled:before {
    opacity: .25;
  }
  
  .slick-prev:before,
  .slick-next:before {
    font-family: 'slick';
    font-size: 20px;
    line-height: 1;
    opacity: .75;
    color: white;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
  
  .slick-prev {
    left: -25px;
  }
  
  [dir='rtl'] .slick-prev {
    right: -25px;
    left: auto;
  }
  
  .slick-prev:before {
    content: '←';
  }
  
  [dir='rtl'] .slick-prev:before {
    content: '→';
  }
  
  .slick-next {
    right: -25px;
  }
  
  [dir='rtl'] .slick-next {
    right: auto;
    left: -25px;
  }
  
  .slick-next:before {
    content: '→';
  }
  
  [dir='rtl'] .slick-next:before {
    content: '←';
  }
  /* Dots */
  
  .slick-dotted.slick-slider {
    margin-bottom: 30px;
  }
  
  .slick-dots {
    position: absolute;
    bottom: -25px;
    display: block;
    width: 100%;
    padding: 0;
    margin: 0;
    list-style: none;
    text-align: center;
  }
  
  .slick-dots li {
    position: relative;
    display: inline-block;
    width: 20px;
    height: 20px;
    margin: 0 5px;
    padding: 0;
    cursor: pointer;
  }
  
  .slick-dots li button {
    font-size: 0;
    line-height: 0;
    display: block;
    width: 20px;
    height: 20px;
    padding: 5px;
    cursor: pointer;
    color: transparent;
    border: 0;
    outline: none;
    background: transparent;
  }
  
  .slick-dots li button:hover,
  .slick-dots li button:focus {
    outline: none;
  }
  
  .slick-dots li button:hover:before,
  .slick-dots li button:focus:before {
    opacity: 1;
  }
  
  .slick-dots li button:before {
    font-family: 'slick';
    font-size: 6px;
    line-height: 20px;
    position: absolute;
    top: 0;
    left: 0;
    width: 20px;
    height: 20px;
    content: '•';
    text-align: center;
    opacity: .25;
    color: black;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
  
  .slick-dots li.slick-active button:before {
    opacity: .75;
    color: black;
  }
</style>

<body>
  <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">New</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">Popular</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">Recommend</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="your-class">
        <div><img src="http://via.placeholder.com/242x300/ffffff/000000" alt=""></div>
        <div><img src="http://via.placeholder.com/242x300" alt=""></div>
        <div><img src="http://via.placeholder.com/242x300/000000/ffffff" alt=""></div>
        <div><img src="http://via.placeholder.com/242x300/ffffff/000000" alt=""></div>
        <div><img src="http://via.placeholder.com/242x300" alt=""></div>
        <div><img src="http://via.placeholder.com/242x300/000000/ffffff" alt=""></div>
        <div><img src="http://via.placeholder.com/242x300/ffffff/000000" alt=""></div>
        <div><img src="http://via.placeholder.com/242x300" alt=""></div>
        <div><img src="http://via.placeholder.com/242x300/000000/ffffff" alt=""></div>
      </div>
    </div>
    <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">
      <div class="your-class">
        <div><img src="http://via.placeholder.com/242x300/ffffff/000000" alt=""></div>
        <div><img src="http://via.placeholder.com/242x300" alt=""></div>
        <div><img src="http://via.placeholder.com/242x300/000000/ffffff" alt=""></div>
        <div><img src="http://via.placeholder.com/242x300/ffffff/000000" alt=""></div>
        <div><img src="http://via.placeholder.com/242x300" alt=""></div>
        <div><img src="http://via.placeholder.com/242x300/000000/ffffff" alt=""></div>
        <div><img src="http://via.placeholder.com/242x300/ffffff/000000" alt=""></div>
        <div><img src="http://via.placeholder.com/242x300" alt=""></div>
        <div><img src="http://via.placeholder.com/242x300/000000/ffffff" alt=""></div>
      </div>
    </div>
    <div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">
      <div class="your-class">
        <div><img src="http://via.placeholder.com/242x300/ffffff/000000" alt=""></div>
        <div><img src="http://via.placeholder.com/242x300" alt=""></div>
        <div><img src="http://via.placeholder.com/242x300/000000/ffffff" alt=""></div>
        <div><img src="http://via.placeholder.com/242x300/ffffff/000000" alt=""></div>
        <div><img src="http://via.placeholder.com/242x300" alt=""></div>
        <div><img src="http://via.placeholder.com/242x300/000000/ffffff" alt=""></div>
        <div><img src="http://via.placeholder.com/242x300/ffffff/000000" alt=""></div>
        <div><img src="http://via.placeholder.com/242x300" alt=""></div>
        <div><img src="http://via.placeholder.com/242x300/000000/ffffff" alt=""></div>
      </div>
    </div>
  </div>
</body>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js" integrity="sha512-XtmMtDEcNz2j7ekrtHvOVR4iwwaD6o/FUJe6+Zq+HgcCsk3kj4uSQQR8weQ2QVj1o0Pk6PwYLohm206ZzNfubg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

<script>
  $(document).ready(function() {
    $('.your-class').slick({
      infinite: true,
      slidesToShow: 3,
      slidesToScroll: 3
    });
  });

  $('a[data-toggle="tab"]').on('shown.bs.tab', function(e) {
    $('.your-class').slick('setPosition');
  })
</script>

</html>

Answer 1

所以我的第一印象是似乎发生了一些“太多”的事情。我经历并简化了一些事情。导致它无法按预期运行的两个最大问题是您需要在每个 tab-pane class 上包含 active。仅在“新建”选项卡上包含 show，因为这是您要在加载时显示的选项卡。

简化 JS ~

$(document).ready(function() {

    $('.your-class').slick({
        infinite: true,
        slidesToShow: 3,
        slidesToScroll: 3
    });
});

在此处查看实际效果 ~

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <title>Focus Education</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.css" integrity="sha512-wR4oNhLBHf7smjy0K4oqzdWumd+r5/+6QO/vDda76MW5iug4PT7v86FoEkySIJft3XA0Ae6axhIvHrqwm793Nw==" crossorigin="anonymous" referrerpolicy="no-referrer"
  />
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick-theme.min.css" integrity="sha512-17EgCFERpgZKcm0j0fEq1YCJuyAWdz9KUtv1EjVuaOz8pDnh/0nZxmU6BBXwaaxqoi9PQXnRWqlcDB027hgv9A==" crossorigin="anonymous" referrerpolicy="no-referrer"
  />
</head>
<style>
  * {
    padding: 0;
    margin: 0;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
  }
  
  body {
    padding: 15px;
    background-color: #35bb60;
  }
  
  div.your-class {
    opacity: 1;
  }
  
  .nav-tabs .nav-link {
    color: #fff;
  }
  
  .wrap-modal-slider {
    padding: 0 30px;
    opacity: 0;
    transition: all 0.3s;
  }
  
  .wrap-modal-slider.open {
    opacity: 1;
  }
  
  .your-class {
    width: 726px;
    margin: 0 auto;
    position: relative;
  }
  /* Arrows */
  
  .slick-prev,
  .slick-next {
    font-size: 0;
    line-height: 0;
    position: absolute;
    top: 50%;
    display: block;
    width: 20px;
    height: 20px;
    padding: 0;
    -webkit-transform: translate(0, -50%);
    -ms-transform: translate(0, -50%);
    transform: translate(0, -50%);
    cursor: pointer;
    color: transparent;
    border: none;
    outline: none;
    background: transparent;
  }
  
  .slick-prev:hover,
  .slick-prev:focus,
  .slick-next:hover,
  .slick-next:focus {
    color: transparent;
    outline: none;
    background: transparent;
  }
  
  .slick-prev:hover:before,
  .slick-prev:focus:before,
  .slick-next:hover:before,
  .slick-next:focus:before {
    opacity: 1;
  }
  
  .slick-prev.slick-disabled:before,
  .slick-next.slick-disabled:before {
    opacity: .25;
  }
  
  .slick-prev:before,
  .slick-next:before {
    font-family: 'slick';
    font-size: 20px;
    line-height: 1;
    opacity: .75;
    color: white;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
  
  .slick-prev {
    left: -25px;
  }
  
  [dir='rtl'] .slick-prev {
    right: -25px;
    left: auto;
  }
  
  .slick-prev:before {
    content: '←';
  }
  
  [dir='rtl'] .slick-prev:before {
    content: '→';
  }
  
  .slick-next {
    right: -25px;
  }
  
  [dir='rtl'] .slick-next {
    right: auto;
    left: -25px;
  }
  
  .slick-next:before {
    content: '→';
  }
  
  [dir='rtl'] .slick-next:before {
    content: '←';
  }
  /* Dots */
  
  .slick-dotted.slick-slider {
    margin-bottom: 30px;
  }
  
  .slick-dots {
    position: absolute;
    bottom: -25px;
    display: block;
    width: 100%;
    padding: 0;
    margin: 0;
    list-style: none;
    text-align: center;
  }
  
  .slick-dots li {
    position: relative;
    display: inline-block;
    width: 20px;
    height: 20px;
    margin: 0 5px;
    padding: 0;
    cursor: pointer;
  }
  
  .slick-dots li button {
    font-size: 0;
    line-height: 0;
    display: block;
    width: 20px;
    height: 20px;
    padding: 5px;
    cursor: pointer;
    color: transparent;
    border: 0;
    outline: none;
    background: transparent;
  }
  
  .slick-dots li button:hover,
  .slick-dots li button:focus {
    outline: none;
  }
  
  .slick-dots li button:hover:before,
  .slick-dots li button:focus:before {
    opacity: 1;
  }
  
  .slick-dots li button:before {
    font-family: 'slick';
    font-size: 6px;
    line-height: 20px;
    position: absolute;
    top: 0;
    left: 0;
    width: 20px;
    height: 20px;
    content: '•';
    text-align: center;
    opacity: .25;
    color: black;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
  
  .slick-dots li.slick-active button:before {
    opacity: .75;
    color: black;
  }
</style>

<body>
  <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">New</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">Popular</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">Recommend</a>
    </li>
  </ul>
  <div class="tab-content" id="myTabContent">
    <div class="tab-pane fade active show" id="home" role="tabpanel" aria-labelledby="home-tab">
      <div class="your-class">
        <div><img src="http://via.placeholder.com/242x300/ffffff/000000" alt=""></div>
        <div><img src="http://via.placeholder.com/242x300" alt=""></div>
        <div><img src="http://via.placeholder.com/242x300/000000/ffffff" alt=""></div>
        <div><img src="http://via.placeholder.com/242x300/ffffff/000000" alt=""></div>
        <div><img src="http://via.placeholder.com/242x300" alt=""></div>
        <div><img src="http://via.placeholder.com/242x300/000000/ffffff" alt=""></div>
        <div><img src="http://via.placeholder.com/242x300/ffffff/000000" alt=""></div>
        <div><img src="http://via.placeholder.com/242x300" alt=""></div>
        <div><img src="http://via.placeholder.com/242x300/000000/ffffff" alt=""></div>
      </div>
    </div>
    <div class="tab-pane fade active" id="profile" role="tabpanel" aria-labelledby="profile-tab">
      <div class="your-class">
        <div><img src="http://via.placeholder.com/242x300/ffffff/000000" alt=""></div>
        <div><img src="http://via.placeholder.com/242x300" alt=""></div>
        <div><img src="http://via.placeholder.com/242x300/000000/ffffff" alt=""></div>
        <div><img src="http://via.placeholder.com/242x300/ffffff/000000" alt=""></div>
        <div><img src="http://via.placeholder.com/242x300" alt=""></div>
        <div><img src="http://via.placeholder.com/242x300/000000/ffffff" alt=""></div>
        <div><img src="http://via.placeholder.com/242x300/ffffff/000000" alt=""></div>
        <div><img src="http://via.placeholder.com/242x300" alt=""></div>
        <div><img src="http://via.placeholder.com/242x300/000000/ffffff" alt=""></div>
      </div>
    </div>
    <div class="tab-pane fade active" id="contact" role="tabpanel" aria-labelledby="contact-tab">
      <div class="your-class">
        <div><img src="http://via.placeholder.com/242x300/ffffff/000000" alt=""></div>
        <div><img src="http://via.placeholder.com/242x300" alt=""></div>
        <div><img src="http://via.placeholder.com/242x300/000000/ffffff" alt=""></div>
        <div><img src="http://via.placeholder.com/242x300/ffffff/000000" alt=""></div>
        <div><img src="http://via.placeholder.com/242x300" alt=""></div>
        <div><img src="http://via.placeholder.com/242x300/000000/ffffff" alt=""></div>
        <div><img src="http://via.placeholder.com/242x300/ffffff/000000" alt=""></div>
        <div><img src="http://via.placeholder.com/242x300" alt=""></div>
        <div><img src="http://via.placeholder.com/242x300/000000/ffffff" alt=""></div>
      </div>
    </div>
  </div>
</body>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js" integrity="sha512-XtmMtDEcNz2j7ekrtHvOVR4iwwaD6o/FUJe6+Zq+HgcCsk3kj4uSQQR8weQ2QVj1o0Pk6PwYLohm206ZzNfubg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

<script>
$(document).ready(function() {

    $('.your-class').slick({
        infinite: true,
        slidesToShow: 3,
        slidesToScroll: 3
    });
});
</script>

</html>

Slick Slider 不适用于 Bootstrap 选项卡

Slick Slider does not work with Bootstrap Tab

html

javascript

css

twitter-bootstrap

bootstrap-5