siema slider unable to function properly within tab function

[eugenetan1986]

During switching of tab, siema slider cannot work unless browser been resize.

https://codepen.io/Eugene7/pen/LYRmyZW

Please kindly advise on this. thank you

[sammovale]

I ran into this problem and came up with a rather hacky solution. The solution is to simply "delay" the rendering with a setTimeout() of around 100ms. This is super hacky but seems to work as now it forces the element to be mounted in the visible DOM with a height before siema does its calcs and magin on the element. Again its not the best solution but it seems to work well for me so far!

[mareqj]

My solution was this:

// slick slider fix on tab switch
jQuery(document).ready(function ($) {
   $(".tab1, .tab2").click(function () {
   setTimeout(function () {
         $('.slick-slider').slick('setPosition');
      }, 0);
   });
});

It actually didn't work right without timeout 0.

[Lemon2311]

When trying this in Code Pen the slider didn't work at all for me, but when I tried running it in the browser, it worked with no issue. I just copy pasted your Code Pen files in a index.html file and ran it with the vs code live server extension and it worked fine.