Question

151

Slick slider not working within jQuery tabs

rated 0 times [ 155] [ 4] / answers: 1 / hits: 23788 / 7 Years ago, sun, february 19, 2017, 12:00:00

I have a carousel working with slick slider working fine in first tab, but when I go to second tab, the slider is not loading, if I open the second tab by default then not loading in second tab but not first tab by then, I think slick slider code is initialized and then its not again initializing when tab is changed, but not sure how to handle this, can somebody please suggest?

Here is the working JSfiddle example

The jQuery for the tab is following:

$('ul.tabs li').click(function(){

    var tab_id = $(this).attr('data-tab');



    $('ul.tabs li').removeClass('current');

    $('.tab-content').removeClass('current');



    $(this).addClass('current');

    $(#+tab_id).addClass('current');

});

if (window.location.hash.length > 0) {

  var hash_str= window.location.hash.split(#)[1];

  $('.tab-link[data-tab=' + hash_str + ']').click();

}

Thanks in advance!

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

uriahw

Add To Favorites

Follow

Total Points: 372

Total Questions: 93

Total Answers: 115

Location: Bahrain

Member since Fri, Sep 16, 2022

2 Years ago

answered 7 Years ago calicinthias · Accepted Answer

The reason behind this is, slick refuses to initialize properly on inactive tabs - for they (inactive tabs) consist of a display:none css property. Therefore try setting hidden tabs' css as follow:

{

  display: block;

  height: 0;

  overflow: hidden;

}

And then you also need to reset the height property back to its size when a hidden tab becomes active. For this you would just do the following:

{

  height: auto;

}