Slider on second tab is not loading properly

Question

I used the tab element to put one slider in each tab.

The slider on the first tab works perfectly, but when I click on the second tab, the slider doesn't appear right away. I have to adjust the screen size and then go back to the original size in order for the slider on the second tab to work.

Does anyone faced a similar problem? How to solve?

I googled a little bit and I think there is a way to solve this with a jquery script refresh function, but the code I tried didn't work.

Please find below the code I'm using.


	
		
- [Tab 1](#tab-1)
		
- [Tab 2](#tab-2)
	

	
		
			
				
					
						
![attachment](images/wedding/11.jpg)

						
![attachment](images/wedding/15.jpg)

						
![attachment](images/wedding/21.jpg)

					
				
			
		

		
			
				
					
						
![attachment](images/wedding/11.jpg)

						
![attachment](images/wedding/15.jpg)

						
![attachment](images/wedding/21.jpg)

SemiColonWeb · Accepted Answer

Hello,

Please consider adding the following JS Code at the bottom of the Page just after the js/functions.js JS File Linking:


	jQuery( '.tabs' ).on( 'tabsactivate', function( event, ui ) {
		var t=setTimeout(function(){ jQuery( '.flexslider .slide' ).resize(); }, 1000);
	});

This should definitely fix your issue. Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues with Canvas.

pedrobodnar · Answer

Although this has worked, I can't help but think this isn't the most elegant solution in terms of User Experience.

I mean, there is still a delay when you click on the second tab for the slider to load. Isn't there any way to leave the second slider "pre-loaded" so when I click in the second tab the slider appears right away?

Regards,
Pedro

Semicolon Web · Answer

Hello,

We understand but unfortunately, the Sliders and Tabs work in this way since both of them run on jQuery and considering the responsive nature, it is necessary to recalculate the dimensions on Tab Change. You can consider decreasing the 1000 Value, to what suits you best.

Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues.

pedrobodnar · Answer

I see.

Just to "polish" this solution a little bit, is there any way to put the "loading icon" while the second slider is loading?

And what I mean by the loading icon is that animation of loading, so the user knows that the slider will appear right away.

Regards,
Pedro

Semicolon Web · Answer

Hello, You can consider using the following codes: HTML: JS: This should definitely work fine. Hope this Helps! Let us know if we can help you with anything else or if you find any further issues.