Redraw Slider Revolution when opening Tabs element

[jackzeronine]

Dear Support,

I have searched the forums and the internet and haven’t been able to find an exact solution to my issue.

(edit: I have seen this post Slider Revolution shrinks in new tabs but the solution didn’t work for me)

I am using a Tabs element, and have a full-width Rev Slider inside each, and each of the tabs hide & show a slider. The sliders do not load correctly when clicking on a tab.

I understand this is because the slider gets its dimensions from the tab, and won’t load correctly if the tab is hidden because it has no dimensions.

However I have little coding experience, so I don’t know how to address the issue.

Could you please assist with the relevant jQuery code to redraw a slider, after a short delay, once its container tab name is clicked?

The website is in offline staging, so I can’t provide login credentials unfortunately.

Thanks so much!

[jackzeronine]

Update: I found the following code after some more searching:

jQuery( '.x-tabs > .x-tabs-list > ul > li > button' ).on('click', () => setTimeout ( () => jQuery(window).trigger('resize') , 750 ) );

This is has improved the performance somewhat - the sliders now render much bigger, but not full size (they turn fullsize once the’yre interacted with, by scrolling left/right)

However I think adding the slider redraw function and tweaking the trigger timeout will get it perfect.

If anyone could help with how to syntactically add that function to the code, I’d be very appreciative.

Thanks!

[ruenel]

Hello Jack,

Thanks for writing in! We are just glad that you have figured it out a way to correct the said issue.
Thanks for letting us know!

Best Regards.

[jackzeronine]

Hi ruenel

I have not found a way to correct the issue entirely.

Could you please re-read my post and let me know how I can do the following:

• reload rev slider inside the tab once the tab is clicked.

Thank you
Jack

[lely]

Hello Jack,

Unfortunately, the setup you have is not recommended. Any element using jquery for display like slider and grids are not recommended to be added inside the a tab element. This is because on load, tabs can be hidden and it will conflct with the element display calculation. It is possible with some customization but this would be outside the scope of our support. Thank you for understanding.

[jackzeronine]

I would have guessed that two elements which are both core features of your product would be within the scope of your support. Not to worry - I’ll just move my future customers to another product.
Really disappointing.

[rad]

Hi Jack,

The code above should work, it triggers the redraw. The slider depends on its container visibility and currently, hidden tab has no dimension until shown. You can improve your code like modifying the 750 to around 1000 (1 second) to make sure tab container is fully visible before the redraw is triggered.

Unfortunately, this can happen to any rendering that depends on container dimension and visibility. And please note that RELOAD is different from REDRAW. The slider itself has no reload functionality, but it can be redrawn by triggering Windows resize event.

And so still, you’re just limited to the above code along with the enhancement that you could add. Even I love to add more to it, redraw is only possible that way for the slider.

Thanks for understanding.