Issue with multiple sliders in a tab element

Support
#1

Hi

I am having some issues with the loading of sliders in a tab element.

You will see o the site attached below there is a tabbed element towards the bottom of the page, the first tab loads the slider without any problems, when moving straight to the second tab it keeps the slider to the left in a very small thumbnail view and doesn’t load that slider correctly. If however you were to open a new browser tab and then click back to the original browser tab with the website loaded the slider will then engage and load correctly.

Appreciate any help our advice you could give here?

Thanks

#2

Hey @newebworks,

Dynamic content or content displayed using Javascript are generally not recommended to be placed inside containers that are also powered by scripts like accordions and tabs.

But, please try the suggestions in Slider Revolution Troubleshooting article.

Thanks.

#3

Hi thanks for coming back to me on this, unfortunately none of that resolved the issue. I just find it odd that when you click off the active browser tab and come back it works no problem. Also when in design mode in pro it works without any issues, it wasn’t until testing that I found the issue.

#4

Hi,

You can try adding the code below in Theme Options > CSS

.x-tabs-panels>.x-tabs-panel:not(.x-active) {
    height: 0 !important;
    overflow: hidden;    
    display: block;
}

Hope this helps.

#5

Hi Paul

Thanks the help, unfortunately that hasn’t worked either it produced the below.

#6

Hey @newebworks,

Upon checking, your slider now works.

I tried in other browsers and it also works.

Please clear your browser cache then check again. Also test in incognito mode and other browsers.

Thanks.

#7

When visiting the page for the 1st time it won’t load, if you click off page and revisit or open developer tools the second tabs loads no problem. As I say very strange behaviour.

#8

I’ve loaded the page in incognito mode so it replicates loading for the first time and also, it is the first time I loaded in Firefox. It’s unlike previously where I could replicate the issue even reloading several times.

#9

I’ve tried this in IE(makes tabs really small) and Firefox and have no problems, i keep getting the issue in Chrome and Safari though.

Thanks for your help so far.

#10

Hi There @newebworks

I have tested your issue on Safari and Chrome, and I see that your sliders are functioning properly in the first attempt without opening dev tools or reloading.

Please make sure to update your browsers to the latest versions and also clear browser cache before testing.

I will also ask one of my collegue to test it on IE as I do not have it.

Thanks!

#11

For the IE Tabs issue, please increase the Min Width of Individual Tabs to 200px or more.

Thanks.

#12

Thank you, for the help. I still get the display issue in chrome and safari.

I have tried a few variations of the settings but nothing seems to resolve this in chrome or safari and after some further testing this is happening in Firefox too. Am I able to upload a screen share of this issue?

#13

Hi There,

Sorry but neither I can replicate the issue on my end. I tested it on Chrome, Firefox, and IE and reload it a couple of times, but the Carousel loads fine every time.

Chrome
Firefox
IE

Just a wild guess, would you mind removing that Google ads widgets on top of the page and see if that resolves the issue on your end.

Thanks,

#14

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.