Canvas Support

Flex Slider not working

2 replies · opened Apr 19, 2016

Hhopefull112Apr 19, 2016

I have two Canvas licenses. Awesome template!

My client is using flex slider to display breaking news. My client has the requirement to build the slides of flex slider dynamically at page load time. On page load the javascript calls an REST API and basing on the number of news items that number of slides are created and appended to the slider. It does not work. We have used the same technique to build the owl-carousel dynamically and that perfectly works! For some reason each individual slide is being set to display:none. I think it is running into timing issue.

Please load the page: http://yusufbaba.com/ . Do view source and search for a DIV with ID breaking-news. The script is below the DIV tag. It perfectly builds the flex slider but the slides are not displayed.

Thanks for your help!

Hhopefull112Apr 19, 2016

I should also add that once in a while it works and shows the slides but most of the times it does not work. When you look at my page if it works for you please refresh the page few times and you will notice that sometimes it does not work. I think it is running into some timing/initialization issues.

SSemicolon WebSTAFFApr 21, 2016

Hello,

Thank You so much for Purchasing Canvas and the Kind Words. :)

We have just checked out your Website and the issue is that you are creating the entire Flex Slider code purely via Javascript (even the Markup Code) which is incorrect. So you will need to reinitialize the Flex Slider once all the HTML Code has been populated in the Document. Consider using the following JS:


	jQuery(document).ready(function($) {

		$.getJSON( "http://bo-alhuda.rhcloud.com/api/news/daily", function( data ) {

			var fslidervar = ''
							+'	'
							+'		'
							+'		'
							+'	'
							+'';

			var items = [];
			$.each( data, function( key, val ) {
				items.push('  
'+val.newsText+'
');
			});

			$("#breaking-news").append(fslidervar);
			$("#news-slide-wrap").append(items.join(""));

			setTimeout( function(){
			  	$('.fslider.customjs').removeClass('customjs');
			  	SEMICOLON.widget.loadFlexSlider();
			}, 500);

		});
	});

This should fix your issue. 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