Slick Slider с вкладками Nav

Question

Я пытаюсь использовать Slick Slider с Bootstrap 4 вкладками, а также сделать мои вкладки отзывчивыми с помощью Slick Slider. Все работает, но когда я вызываю слайдер на вкладках, все ломается. В основном, когда я нажимаю вкладку, остается активной, даже если я ее изменяю.

Мой код:

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

По какой-то причине выясняется, что Bootstrap 4 не понимает элементов навигации, когда они обертываются разметкой Slick. Мне удалось восстановить активное / неактивное переключение вкладок навигации, добавив это JavaScript:

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