twitter-bootstrap - 带有引导标签的光滑 js

我正在尝试使用带有 Bootstrap 选项卡的光滑 js 滑块，如下所示



在第一个选项卡(BEST SELL)中，滑块运行良好。但是，当我切换到另一个选项卡(如 TEXT-BOOKS)时，即使第一个选项卡(BEST SELL)的代码相同，光滑显示也完全错误。



但是当我单击下一个箭头时，它固定到原始标签中，就像我想要的第一张图片一样。

     $(document).on('ready', function() {

        $(".tab2").slick({
        setPosition : 0,
        dots: true,
        infinite: true,
        slidesToShow: 5,
        slidesToScroll: 3
      });

      $(".regular").slick({
        dots: true,
        infinite: true,
        slidesToShow: 5,
        slidesToScroll: 3
      });
 });

HTML :

<div id="menu2" class="tab-pane fade ">
  <div class="tab2 slider ">


  <div class="contentbox">
 <img src="images/bk2.png" class="contentbox_img">
 <a href="" class="contentbox_title">The Third Planet</a>
 <p class="contentbox_price">$200.00</p>
  </div>

  <div class="contentbox">
 <img src="images/bk3.png" class="contentbox_img">
 <a href="" class="contentbox_title">The Third Planet</a>
 <p class="contentbox_price">$200.00</p>
  </div>

  <div class="contentbox">
 <img src="images/bk1.png" class="contentbox_img">
 <a href="" class="contentbox_title">The Third Planet</a>
 <p class="contentbox_price">$200.00</p>
  </div>

  <div class="contentbox">
 <img src="images/bk1.png" class="contentbox_img">
 <a href="" class="contentbox_title">The Third Planet</a>
 <p class="contentbox_price">$200.00</p>
  </div>

  <div class="contentbox">
 <img src="images/bk1.png" class="contentbox_img">
 <a href="" class="contentbox_title">The Third Planet</a>
 <p class="contentbox_price">$200.00</p>
  </div>

  <div class="contentbox">
 <img src="images/bk1.png" class="contentbox_img">
 <a href="" class="contentbox_title">The Third Planet</a>
 <p class="contentbox_price">$200.00</p>
  </div>

  <div class="contentbox">
 <img src="images/bk1.png" class="contentbox_img">
 <a href="" class="contentbox_title">The Third Planet</a>
 <p class="contentbox_price">$200.00</p>
  </div>

  <div class="contentbox">
 <img src="images/bk1.png" class="contentbox_img">
 <a href="" class="contentbox_title">The Third Planet</a>
 <p class="contentbox_price">$200.00</p>
  </div>

  </div>

最佳答案

试试这个:

JS:

$(function() {
  function slickInit() {
    $(".regular").slick({
      dots: true,
      infinite: true,
      slidesToShow: 5,
      slidesToScroll: 3
    });
  }
  slickInit();
  $('a[data-toggle="pill"]').on("shown.bs.tab", function(e) {
    $(".regular").slick("unslick");
    slickInit();
  });

  function myFunction() {
    var x = document.getElementById("myTopnav");
    if (x.className === "topnav") {
      x.className += " responsive";
    } else {
      x.className = "topnav";
    }
  }
});

关于twitter-bootstrap - 带有引导标签的光滑 js，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/44643425/