Flexslider does not show when initially hidden

Support
#1

Hello, I have section initially hidden containing a cornerstone slider (flexslider). When the user clicks on a read more button the section shows but the slider does not. The height stays at 0px. Is there a way to re-initialize the slider when the section shows? If i resize the browser window, the slider gets its right size.

#2

Hi There,

Thanks for writing in! To assist you with this issue, we’ll first need you to provide us with your URL. 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 with everything.

Thank you.

#3

Hi,
you can find the site here: http://phpstack-74126-328276.cloudwaysapps.com/
A bit down on the site, look for this button: https://cl.ly/180R2s0d0W1z

Thanks!

#4

Hello There,

Thank you for the clarifications. Please keep in mind that the slider is dependent on its container. It needs to initialize upon page loading. If the container is hidden, then of course the height is zero and that the slider cannot initialize.

To resolve your issue, you must do the following:
1.) please replace your code in your raw content element. You can make use of this code instead:

<a href="#" class="read-more slide active" data-link="#about-edilog-more" style="outline: none;">Läs mer om Edilog<span class="read-more-icon"></span></a>

2.) please add this JS code in the Theme Options > Global JS (http://prntscr.com/evswzb)

(function($){
  $('.read-more.slide.active .read-more-icon').on('click touchend', function() {
    $('.flex-prev').trigger('click'); 
    console.log('triggered');
  });  
})(jQuery);

Please let us know if this works out for you.

#5

Hi,
thanks for your advice, regretfully that did not fix it. I’m using my own javascript which I’m enqueueing in WordPress. Looks like this:

(function($) {

	
	$('.more-content').hide();

	$('a.read-more.slide').on('click touchend', function() {

	  var target = $(this).data('link');

	  if ($(target).hasClass('active')) {
	    $(target).removeClass('active').slideUp({queue:false, duration: 600, easing: 'easeInOutQuad'});

	    $(this).removeClass('active');
	  
	  } else {
	    $(target).addClass('active').slideDown(function(){
	       $('.x-flexslider').data('flexslider').setup(); 

	    });

	    $(this).addClass('active');

	    $('html, body').delay(400).animate({
	        scrollTop: $(target).offset().top - 48
	    }, 1000, 'swing');
	  }

	  return false;
	});
})( jQuery );

I managed to get it to work, sort of, by adding this code as a callback function to the slideDown event:

$('.x-flexslider').data('flexslider').setup();

I try to reinitilaze the slider after the section opens but something is happening with the order of the slider images when I do this. Is there a proper way to reinitilaze the slider?

Flexslider does not load pictures when tab is initially hidden
#6

Hello There,

You can make use of this line instead:

$('.x-flexslider').data('flexslider').setup('init');

Hope this helps.

#7

Hello,
that sort of worked but it loads the slides in wrong order, starting with the last slide first.

#8

Hi,

In that case, would you mind providing us your wordpress admin login in secure note so we can take a closer look.

Thanks

#9

Hi there,

You may replace this line,

$('.x-flexslider').data('flexslider').setup();

with this

setTimeout( function(){
$(window).trigger('resize');
}, 700);

Since your content animation has 600 duration, we need to make sure the re-render function triggers after that duration by using timeout. Then we use window resize to re-render it instead of re-initializing it.

Thanks.