Top Slider image/text not in sequence

Hello.

On my home page slider (top) I have created 4 images. Two of the images have text. When i use my keyboard arrows to advance the frames and go back using the back arrow, then go forward again, the text and images get mixed up, meaning the text will show on the image which had no text.

Can this be fixed OR can the keyboard arrows be removed from this slider?

Thank you

Hello there,

Thank you for reporting.

Could you please post your URL here so we can have a closer look?

Regards,
Kharis

http://creativew.com/theme

Again, if you toggle back and forth with the arrow keys you’ll see the “misalignment” of text and image I am referring to.

Thanks.

Hello there,

Thank you for the link. It helped me a lot.

I’m afraid that I can’t replicate the same issue on my testing site. I thought there is a plugin conflict. What will happen if you temporarily deactivate the WP Super Cache plugin? Once you are done deactivating it, you would need to clear your browser’s cache before reloading you site.

If it didn’t give any changes, try to temporarily deactivate all non-required plugins one by one until you get the slider text works fine.

Regards,
Kharis

Hi Kharis,

I did a fresh install on my server of your Sydney Theme. I Added one image as the third slider and added text to this image. I then deleted the text from YOUR second slider. I am still getting the “misalignment” issues. If you toggle through all sequences, then use back arrow and quickly use forward error, you will see the trouble I am getting. In the end, no matter how slow or fast a user toggles through the images, the images should stay “in tact” with the appropriate text - yes?

New link is: http://creativew.com/multisite

Is there a way to add code to just the top slider, to have the keyboard functionality disabled?

Thanks for your time.

Hey guys… There was a similar post on wordpress it’s self and the person resolved it by adding some code. I’ll try and find the link for you!

https://wordpress.org/support/topic/picture-slider-speed-vs-text-slider-speed-not-timed-in-the-same-way

Is this any help at all?

Rachel

:slight_smile:

Hello there,

My apologies, I’d like to take back my statement. After taking a deep inspection, I can replicate the issue on my end.

Removing text slider keyboard navigation

  1. Open js/main.js file. Then copy its whole content
  2. Then paste it to js/main.min.js’s content. So it will be more readable
  3. Find the following code block
// Text slider
(function() {
	if ( $( ".text-slider" ).length ) {
		$('.text-slider').flexslider({
			animation: "slide",
			selector: ".slide-text li",
			controlNav: false,
			directionNav: false,
			slideshowSpeed: $('.text-slider').data('speed'),
			animationSpeed : 700,
			slideshow : $('.text-slider').data('slideshow'),
			touch: true,
			useCSS: false,
		});
	}
})();

Then specify the keyboard option value to false (default it true). So you should have something like the following.

// Text slider
(function() {
	if ( $( ".text-slider" ).length ) {
		$('.text-slider').flexslider({
			animation: "slide",
			selector: ".slide-text li",
			controlNav: false,
			directionNav: false,
			slideshowSpeed: $('.text-slider').data('speed'),
			animationSpeed : 700,
			slideshow : $('.text-slider').data('slideshow'),
			touch: true,
			useCSS: false,
      keyboard: false,
		});
	}
})();
  1. Minify the code using this tool

Removing background image slider navigation

  1. Open js/scripts.js file
  2. Replace the minified Superslides code with the following

https://gist.githubusercontent.com/kharissulistiyo/f0d0751055288d506a34/raw/67709496c1cdd56427931a7ef43ed6b1297fb790/superslides.js

  1. Find the following code block
$(document).on('keyup', function(e) {
  if (e.keyCode === 37) {
    that.animate('prev');
  }
  if (e.keyCode === 39) {
    that.animate('next');
  }
});

Comment out the code above to make it stops to work. So you should have something like the following.

/*
$(document).on('keyup', function(e) {
  if (e.keyCode === 37) {
    that.animate('prev');
  }
  if (e.keyCode === 39) {
    that.animate('next');
  }
});
*/
  1. Minify the code

P.S.

As you were editing the core theme’s file, you should take it at your own risk. The modifications you have done will be overwritten once you are updating the theme in the future.

Regards,
Kharis

I see what I did wrong. This is now perfect - and a good functional work around for the text and image not “aligning” problems people are facing.

Thank you,
Esteban

Topic Resolved :slight_smile:

Dear Esteban,

Thank you for updating me.

I am glad to know that it resolved.

Please let us know in a new topic if you have any further questions, or if we can provide you with any other assistance.

Regards,
Kharis