WP Tabs Conflict

Hi Pete,

Flex Slider doesn’t initiate properly when the slideshow is hidden, so you need to reinitialise the slideshow when the Golf In Dubai tab is clicked/loaded. I’m not familiar with WP Tabs but hopefully there is a callback you can hook into, if not you can use the jQuery onclick event.

The JavaScript you need to execute once the tab is clicked/loaded is:

$('#metaslider_6391').flexslider({
                slideshowSpeed:3000,
                animation:'slide',
                controlNav:false,
                directionNav:true,
                pauseOnHover:true,
                direction:'horizontal',
                reverse:false,
                animationSpeed:600,
                prevText:"<",
                nextText:">",
                easing:"linear",
                slideshow:true,
                itemWidth:239,
                minItems:1,
                itemMargin:10
            });

(taken from the page source).

Regards,
Tom

Hi Tom,

Thank for getting back to me so quickly. Think I follow your answer but I have a couple of queries. Where do I need to put this code? I’m guessing in a JQuery file but I’m not sure where it needs to go.

I note that you refer to metaslider_6391 does that mean I will need to add this code, amended, for every use of the slider throughout the site? There are likely to be dozens of sliders used on all sorts of pages. It would be cumbersome to have a separate code for each iteration, especially if my client wishes to add their own once the site is live.

I wonder if it maybe better if I can adapt the coding for the tabs. However I don’t know what you mean by ‘a callback to hook into’.

Please can you advise me on this.

Many thanks

Pete

Hi Tom,

Just following up on my query. If you could take a look and let me know where I should install your fix, and so on, that would be great.

Hoping all is well and looking forward to hearing from you,

Many thanks
Pete

Hi Pete,

You could either add the code to an existing JavaScript file, making sure it’s within a jQuery document ready function (https://learn.jquery.com/using-jquery-core/document-ready/) or create a new file and add it into your theme’s header, or lastly just place the JavaScript inline within <script> tags.

For example, the following code would load the slider for the Dubai tab:

$( "#ui-id-6" ).click(function() {
  $('#metaslider_6391').flexslider({
                  slideshowSpeed:3000,
                  animation:'slide',
                  controlNav:false,
                  directionNav:true,
                  pauseOnHover:true,
                  direction:'horizontal',
                  reverse:false,
                  animationSpeed:600,
                  prevText:"<",
                  nextText:">",
                  easing:"linear",
                  slideshow:true,
                  itemWidth:239,
                  minItems:1,
                  itemMargin:10
              });
});

You’d need to repeat this for each tab and slider, changing the selectors accordingly i.e. #ui-id-6 (the tab ID) and #metaslider_6391 (the slider ID)

Thanks,
Dave

Hello Dave,

Many thanks for your advice and tips. Unfortunately I may be doing something wrong. I tried all three options in order and none of them have worked I’m afraid. Currently the final option, a script in the page itself is on the page and running. However, the slider still doesn’t activate when the tab is clicked. Am I doing something wrong? Can you let me know please.

Many thanks again,

Pete

Hi Pete,

Try replacing the inline script with the following:

jQuery(document).ready(function(){
	jQuery( "#ui-id-6" ).click(function() {
  		jQuery('#metaslider_6391').flexslider({
			slideshowSpeed:3000,
			animation:'slide',
			controlNav:false,
			directionNav:true,
			pauseOnHover:true,
			direction:'horizontal',
			reverse:false,
			animationSpeed:600,
			prevText:"<",
			nextText:">",
			easing:"linear",
			slideshow:true,
			itemWidth:239,
			minItems:1,
			itemMargin:10
		});
	});
});

Thanks,
Dave

Hi Dave,

Thank you so much for your support and your help on this. Sadly, updating the script in the page hasn’t worked. The same issue remains. It is most odd that it works on other pages but not within the tabbed content. Proving to be very frustating. Sorry to continue to be a thorn in your side on this. Any otehr ideas gratefully received.

Many thanks

Pete

Hi Pete,

Could you try moving the script tag to the footer?

I’m not 100% sure on what is causing the error but it might be related to the fact that it’s within the main content area at the moment?

Thanks,
Dave

Hi Dave,

Thank you for your quick reply. I have tried putting the code in to the footer and sadly the same problem continues. I’m not an expert on jQuery, could the issue be that the code is in more than one place on a page. For example, if I have put it in the footer should I remove it from the page, or the header, just in case? Seems odd. Look forward to hearing your ideas and thoughts. Many thanks for all your help.

Cheers
Pete

Hi Tom and Dave,

Just wondered if you have had a chance to have another think about this. I have found an alternative content carousel but would still prefer to use yours. At present I have taken your plug in off the Dubai page for testing another option. But if you have any ideas as to why the jQuery isn’t working properly please let me know.

Looking forward to hearing from you,

Many thanks

Pete