Canvas Support

Slider on second tab is not loading properly

5 replies·opened Feb 6, 2019
P
pedrobodnarFeb 6, 2019

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.

<div class="tabs clearfix" id="tabs">
	<ul class="tab-nav clearfix">
		<li><a href="#tab-1">Tab 1</a></li>
		<li><a href="#tab-2">Tab 2</a></li>
	</ul>

	<div class="tab-container">
		<div class="tab-content clearfix" id="tab-1">
			<div class="fslider bottommargin-sm">
				<div class="flexslider" id="slider-flex">
					<div class="slider-wrap">
						<div class="slide"><img src="images/wedding/11.jpg" alt="Image"></div>
						<div class="slide"><img src="images/wedding/15.jpg" alt="Image"></div>
						<div class="slide"><img src="images/wedding/21.jpg" alt="Image"></div>
					</div>
				</div>
			</div>
		</div>

		<div class="tab-content clearfix" id="tab-2">
			<div class="fslider bottommargin-sm">
				<div class="flexslider" id="slider-flex">
					<div class="slider-wrap">
						<div class="slide"><img src="images/wedding/11.jpg" alt="Image"></div>
						<div class="slide"><img src="images/wedding/15.jpg" alt="Image"></div>
						<div class="slide"><img src="images/wedding/21.jpg" alt="Image"></div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>
S
SemiColonWebSTAFFFeb 7, 2019

Hello,

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

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

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.

P
pedrobodnarFeb 9, 2019

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

S
SemiColonWebSTAFFFeb 11, 2019

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.

P
pedrobodnarFeb 16, 2019

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

S
SemiColonWebSTAFFFeb 18, 2019

Hello,

You can consider using the following codes:

HTML: 

<div class="fslider" style="min-height: 80px;">
	<div class="preloader" style="position: absolute; top:0; left:0; width:100%; height:100%;"></div>
	<div class="flexslider">
		<div class="slider-wrap">
			<div class="slide"><img src="images/portfolio/single/full/1.jpg" alt="Slider 1"></div>
			<div class="slide"><img src="images/portfolio/single/full/7.jpg" alt="Slider 2"></div>
			<div class="slide"><img src="images/portfolio/single/full/10.jpg" alt="Slider 3"></div>
		</div>
	</div>
</div>

JS: 

<script>
    jQuery( '.tabs' ).on( 'tabsactivate', function( event, ui ) {
        setTimeout(function(){
        	jQuery(ui.newPanel).find( '.flexslider .slide' ).resize();
        	jQuery(ui.newPanel).find( '.fslider > .preloader' ).remove();
        }, 700);
    });
</script>

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.

Have the same question, or something new?

Sign in to the Canvas dashboard to reply or open your own topic. Canvas owners get direct help from the SemiColonWeb team.

Reply on the dashboard