[spot0608]

Hi there,

is there a way to make the “feature-slider” more “touch friendly”?
By default the slider changes every 4 (or whatever time is set) seconds and there are “arrow-buttons” to go forward to the next slide or back.
Is there a way to go forward to the next slide by “wiping” the finger from right to left over the screen? The same way you usually browse through images on a smartphone in the photo-app?

Thanks in advance

John

[Mahesh]

@spot0608: For this, you’ll need to create a child theme and enqueue some scripts. You can find more details on creating child theme HERE.
1. Download touchwipe library from the link below (I used the minified version)
http://www.netcu.de/jquery-touchwipe-iphone-ipad-library
2. Create a file and name it custom-swipe-script.js and add the following code into it.

jQuery(document).ready(function() {
	jQuery(".cycle-slideshow").touchwipe({
	      wipeLeft: function() {
	            jQuery(".cycle-slideshow").cycle("next");
	      },
	      wipeRight: function() {
	            jQuery(".cycle-slideshow").cycle("prev");
	      }
	});
});

3. Then in your child theme’s functions.php add the following codes:

add_action( 'wp_enqueue_scripts', 'parallax_frame_child_swipe_scripts' );
function parallax_frame_child_swipe_scripts() {
    wp_enqueue_script( 'parallax-frame-touch-swipe', get_stylesheet_directory_uri() . '/jquery.touchwipe.min.js' );
    wp_enqueue_script( 'parallax-frame-custom-script', get_stylesheet_directory_uri() . '/custom-swipe-script.js' );
}

I have tested it on our server, and worked fine. Let me know if any problem.

Regards,
Mahesh

[Author]

Posts