Slick: using slick carousel in a not-active tab

[buseca]

Using slick in tabs, it only works in the tab which is active at the load of the page.
in other tabs, the divs are collapsed, one over other. I think it' a initialization problem, but i can't figure how to solve it.

[wilirius]

I believe this has been mentioned before. Attach initialization to the tab activating.

[buseca]

I 've tried it but it doesn't work with the Zurb Foundation framework, maybe cause the initialization happen before the tab triggeration.
I solved changing the tabs behavior: i've setted the not-active tabs to "overflo-y: hidden" and "height: 0"; instead of the classic "display:none".

[wilirius]

187 was the same issue. Slick will not work with a hidden element as it requires the element to have a width in order to work, and a hidden element has no width.

if you are hiding slick, be sure to hide it after it has initialized, or mitigate the dimension calculation by triggering a resize event.

[buseca]

ok, i've searched the issue but not enough,
thank you

[b-d-m-p]

Thanks for the solution, @buseca.

For anyone else with Foundation, make sure you put height: auto on the active tab.

This is what .tab-content should look like in your _tabs.scss

 .tabs-content {
       @include clearfix;
       margin-bottom: $tabs-content-margin-bottom;
       width: 100%;
       > .content {

          // Replacement for display: none;, a fix for carousel in tabs
         overflow-y: hidden;
         height: 0;

         float: $default-float;
         padding: $tabs-content-padding 0;
         width: 100%;
         &.active { display: block; float: none;  height: auto;}  // height: auto; added. Also part of the display: none; replacement, a fix for carousel in tabs
         &.contained { padding: $tabs-content-padding; }
       }
       &.vertical {
         display: block;
         > .content { padding: 0 $tabs-content-padding; }
      }
    }

Hope it helps someone.

[pixprod]

This worked for me with foundation and slick 1.6:

$('ul.tabs').on('toggled', function (event, tab) {
$('.slideList .productGrid').slick('setPosition');
});

[rijosh]

Not working in tab. setPosition and resize not working..

see this
http://codepen.io/Rijosh/pen/qaoYEL

[vanydiah]

$('.slider-name').slick('setPosition'); is not working for me,

i added 0 and it works :
$('.slider-name').slick('setPosition', 0);

[miladmodaresi]

this code worked for me
this for my tabs in css=>>.group-tabs{
display: flow-root;
border-right: 1px solid #ebebeb;
}

jQuery( function() {
window.setTimeout(function(){
jQuery( "#tabs" ).tabs().addClass( "ui-tabs-vertical ui-helper-clearfix" );
jQuery( "#tabs li" ).removeClass( "ui-corner-top" ).addClass( "ui-corner-left" );
},2000)} );

[tomislav12]

I solved it with setInterval (with 1ms) & clearInterval javascript functions, more info: https://stackoverflow.com/a/1225185/557432 and https://www.w3schools.com/jsref/met_win_clearinterval.asp

[saxsax1995]

Okay so i was stuck in this sitution just like you guys and i found the reason it cause the issue, it simple because when you use slick in tabs, it gonna set your unused tab to display: none, and when they did, the width in that unused tab become 0, and slick need a width to run correctly, and this solution worked for me:

.tab-content>.tab-pane{
  display: flex !important;
  height: 0px;
  overflow: hidden;
}

.widget-tab.mixed-tab .tab-pane.active{
  height: auto;
}

Set non-active tab to display: flex !important; and overflow: hidden; will do the same thing as display: none, but for some reason, it will set your width automatic, so the slick will works perfectly.

[IvesDotMe]

$('.slider-name').slick('setPosition'); is not working for me,

i added 0 and it works :
$('.slider-name').slick('setPosition', 0);

Bootstrap 4. You need to trigger the position change on the tab shown event.

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

[briannanda]

thanks @IvesDotMe