[woodybepiercedParticipant]

We have a few sliders placed within tabs. Within the Configurations tab on the page below, the slider is loading very slow. Any thoughts on why it’s taking so long for the images to come in?

[woodybepiercedParticipant]

This reply has been marked as private.

[NicoModerator]

Hi There,

Thanks for writing.

As I checked you slider in your configurations tab, there is no error nor your images are not that big for it too load slows. This could be a conflict in javascript of your plugins. You could try testing for a plugin conflict. You can do this by deactivating all third party plugins, and seeing if the problem remains. If it’s fixed, you’ll know a plugin caused the problem, and you can narrow down which one by reactivating them one at a time.

Hope it helps.

Cheers!

[woodybepiercedParticipant]

I doubt it is a plugin conflict, because the sliders in the first tab work great.

[woodybepiercedParticipant]

Do you think it could be a possible timing issue with the Tabs? It seems odd that the first tab sliders would all load fine, but the two in the third tab would have issues.

[Rue NelModerator]

Hello There,

After investigating the slider inside your tabs, what happens there is that, when the page loads, the slider already started to animate. Since the tabs is closed or displayed as none, the initial width x height of the slider is 0x0. It takes a few complete sliding rotation of the items before the script realize that it is already opened and that it has to reset the width and height of the slider.

Please try adding a min-height for the slider. The following might help.

.x-tab-pane .x-flexslider-shortcode {
   min-height: 220px;
}

Please let us know if this has work for you.

[Jeroen BParticipant]

Tried this solution, does not work for me… any other options?

[ZeshanMember]

Hi Jeroen,

Thanks for writing in! To assist you with this, we’ll first need you to provide us with your URL as stated on the forum entrance page. This is to ensure that we can provide you with a tailored answer to your situation. Once you have provided us with your URL, we will be happy to assist you.

Thanks!

[Jeroen BParticipant]

This reply has been marked as private.

[Jeroen BParticipant]

found my solution:

.x-tab-content>.x-tab-pane:not(.active) {
height: 0px;
overflow: hidden;
display: block;
padding: 0;
margin: 0;
}

Thanks

[ChristopherModerator]

Glad you were able to fix it.

[Author]

Posts