Slick slider not working within jQuery tabs

Question

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!

Answer 1

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;
}