带有引导选项卡的 Slick js

Question

我正在尝试使用带有 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>

Answer 1

这将刷新滑块，它使用引导选项卡的事件并使用'setPosition'刷新光滑滑块

 $('a[data-toggle="tab"]').on('shown.bs.tab', function(e) {
     e.target
     e.relatedTarget
     $('#your_slider').slick('setPosition');
 });

Answer 2

试试这个：

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";
    }
  }
});

Answer 3

Diepon 有一个惊人的解决方案。

.pill-content > .pill-pane {
    display: block;     /* undo display:none          */
    height: 0;          /* height:0 is also invisible */
    overflow-y: hidden; /* no-overflow                */
}

https://github.com/kenwheeler/slick/issues/619