I am facing a challenge in integrating a slider within multiple jquery tabs. As the slider requires specific width and height to display correctly, I have to trigger a window resize event when the tabs are switched. Surprisingly, the code I implemented only works once:
jQuery(".vc_tta .vc_tta-tab, .vc_tta .vc_tta-panel-title").click(function() {
jQuery(window).trigger("resize");
});
Even though I placed this code outside my document.(ready) function, it still fails to work more than once.
The complete script I am using is as follows:
jQuery(document).ready(function($){
$('.slider-<?= $name ?>').slick({
slidesToShow: 1,
centerMode: true,
centerPadding: '200px',
arrows: true,
focusOnSelect: true,
responsive: [
{
breakpoint: 800,
settings: {
centerMode: false
}
}
]
});
});
jQuery(".vc_tta .vc_tta-tab, .vc_tta .vc_tta-panel-title").click(function() {
jQuery(window).trigger("resize");
});
Given that I am utilizing Visual Composer in WordPress, replicating exactly has its challenges, much like in this similar issue: https://jsfiddle.net/keithpetrillo/d9jrgs80/