SlickSlider不適用于Bootstrap選項卡-有解無憂

我想使用光滑的滑塊滑動影像。我使用了 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/[email protected]/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/[email protected]/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>

uj5u.com熱心網友回復：

所以我的第一印象是似乎有點“太多”了。我經歷并簡化了一些事情。導致它無法按預期運行的兩個最大問題是您需要包含active在每個tab-pane類中。僅包含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/[email protected]/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/[email protected]/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>

轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/429624.html

標籤：javascript html css 推特引导引导程序 5

上一篇：如何將導航欄的“ul”塊向右移動而不影響導航欄中回應性的切換按鈕功能？

下一篇：Div不適合可用空間