Question

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

在第一个标签（BEST SELL）中，滑块效果很好。但是当我切换到另一个像TEXT-BOOKS这样的标签时，即使使用第一个标签（最佳卖出）的相同代码，光滑也显示完全错误。

但是当我点击下一个箭头时，它会将原始标签固定在我想要的第一张图片上。

     $(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

试试这个：

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 2

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

刷新光滑的滑块

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

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

Slick js带有引导标签

3 个答案: