CODEWITHSUNDEEP
javascriptjquerycsstwitter-bootstrapslick.js
trunks
trunks

Reputation: 147

Slick Slider with Nav tabs

I'm trying to use Slick Slider with Bootstrap 4 tabs and also to make my tabs responsive with slick slider as well. Everything works but when I call slick slider on tabs the whole thing breaks. Basically when I click a tab stays active even if I change it.

My code:

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

Any ideas? Thank you

Upvotes: 1

Views: 3123

Answers (1)

Ed Lucas
Ed Lucas

Reputation: 7305

For whatever reason, it appears that Bootstrap 4 is confused about the nav elements once they get wrapped by Slick's markup. I was able to restore the active/inactive toggling of the nav tabs by adding this JavaScript:

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

Upvotes: 2

Related Questions