带有导航选项卡的 Slick Slider

Question

我正在尝试将 Slick Slider 与 Bootstrap 4 个选项卡一起使用，并使我的选项卡也可以响应 slick 滑块。一切正常，但是当我在选项卡上调用光滑的滑块时，整个事情都崩溃了。基本上，当我点击一个标签时，即使我改变了它，它也会保持活动状态。

我的代码：

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


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


$(document).ready(function(){
  $('.nav-tabs').slick({
    infinite: true,
    slidesToShow: 3,
    slidesToScroll: 3
  });
});

Codepen

有什么想法吗？谢谢

Answer 1

无论出于何种原因，一旦导航元素被 Slick 的标记包裹起来，Bootstrap 4 似乎对导航元素感到困惑。通过添加此 JavaScript:

，我能够恢复导航选项卡的 active/inactive 切换

  $('.nav-item a').on('click', function (e) {
      e.preventDefault();
      $('.nav-link').removeClass('active');
      $(this).tab('show');
  });

带有导航选项卡的 Slick Slider

Slick Slider with Nav tabs

javascript

jquery

css

twitter-bootstrap

slick.js