Canvas Support

How to reload Flex Slider

8 replies · opened Jan 21, 2021

JjillatsitewavesJan 21, 2021

Hi Again
I am having an issue with the flexslider. Many times it initiates too soon and creates a very small area or 0 for the slider. I believe I need to have the flexslider reload after everything else has loaded. I can't figure this out but I've seen examples of reloading the slider, but the methods I have found do not work.
So, is there a way to reload canvas flexslider after all other elements have loaded?
Here is the example I am working with:
http://demos.sitewaves.net/themeadows/
If you reload a few times you will see that many times it doesn't load correctly.
Thanks

SSemicolon WebSTAFFJan 22, 2021

Hello,

We have just checked this out and the issue is with the outdated Plugin Codes in your js/plugins.js File. Consider replacing the File with the File we have attached to this reply and try checking your Pages with the Flex Slider again.

This issue should be resolved. Hope this Helps!

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

JjillatsitewavesJan 22, 2021

Thanks for the quick reply. Unfortunately that has not resolved the issue.

SSemicolon WebSTAFFJan 22, 2021

Hello,

We have just checked out your Website and we cannot reproduce the Flex Slider issues anymore and the Sliders appear to be working perfectly fine for us (even on reloads). Also, the JS Errors have disappeared.

Please consider clearing your Browser and check this again. If this still does not fix your issues, please provide us with a Screencast of the Issue along with the OS/Browser used so that we can reproducing this on our end and then provide you further solutions. Thanks for your Patience.

Meanwhile, do let us know if we can help you with anything else or if you find any further issues with Canvas.

JjillatsitewavesJan 26, 2021

Thanks for the reply. Unfortunately this page fails upon almost every refresh, on various devices at various locations, strange you don't experience that. (screenshot attached)
div class flexslider height is only 32px after loading or refresh. After I refresh a few times it may or may not set correctly. If I manually set that height in my chrome inspector the page looks good. This is why I wanted to have a script that reloads flexslider after everything on the page is loaded, then flexslider can calculate the correct height? This issue occurs on all of our devices so it is not a cache related issue and I see many related posts online for the same issue but none of the fixes I see work.

We were going to change to revo slider for this project, but if I could get flexslider to work that would be great. On another canvas template we used, we also aborted flexslider for the same reason...we presented demo to clients and they experienced the same issue. It was not a good demo ;-(

I follow up just in case you can help further. Of course this does not affect our respect for semicolonweb at all ;-)
Always very happy with the products and support.
Thanks

SSemicolon WebSTAFFJan 27, 2021

Hello,

Apologies for the inconvenience caused!

This indeed is weird. We have never experienced any issue with this Slider in any Browser we have checked your Website.

You can consider using the following 2 functions after Page Load:

SEMICOLON.widget.loadFlexSlider();

or

$( '.flexslider .slide' ).resize();

Try using this like this:

jQuery(window).on( 'load', function(){
	setTimeout( function(){
		$( '.flexslider .slide' ).resize();
	}, 1000);
});

You can replace the Function inside the setTimeout with the other one and check which works best for you.

Hope this Helps!

Additionally, can you please check this Demo: http://themes.semicolonweb.com/html/canvas/demo-real-estate.html and let us know if you are facing the same issue with this? So that we can check this more deeply and fix this.

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

JjillatsitewavesJan 28, 2021

Those suggestions did not help. I've tried and tried, many hours. Then I switched it to revo but then the carousels don't load correctly, until you try to resize the browser, then they size correctly.
http://demos.sitewaves.net/themeadows/index-revo-test.html
I'm just about ready to give up.
But thanks for everything you have done.

JjillatsitewavesJan 28, 2021

Please note: I found that if I set a fixed height on flexslider class it loads correctly everytime. Perhaps I can make a new class and add to media queries? Also Interesting that it works normally on local server but only fails on load from webserver.

<div class="flexslider" style="height: 1000px !important;">

was

<div class="flexslider" style="height: 100% !important;">

SSemicolon WebSTAFFJan 28, 2021

Hello,

Thanks for your Continued Patience and Apologies for the Inconveniences!

We would love to fix these issues. Can you please consider updating the js/plugins.js File with this Updated File: https://drive.google.com/file/d/1Xwhcd8uccvqHxolB5jFabmwSkjw9STxU/view?usp=sharing .

This should fix some JS Issues which might in turn fix the Flex Slider and Revolution Slider as well.

Then let us know if you are still facing further issues. 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