Nivo Slider Swipe Navigation for Touch Screens

7/3/2014 – This tutorial has been updated to work better with Android devices running 4.x.x! Still works perfectly with iOS 5 and above.

My clients LOVE sliders. So I’ve been tinkering with my Nivo Slider solution for quite some time. There were times that I was accidentally swiping at my iPad to navigate slides during site testing. I thought “I can’t be the only one, right?” I ran across a tutorial on doing something similar, but I’ve added a little bit more to the solution. This solution can be easily retrofitted to an already existing Nivo slider.

  1. Set up Nivo slider like your normally would. Finish up all you HTML and CSS.
  2. Download hammer.js (quick download).
  3. Upload the hammer.min.js file to your site and call it in your source code right after the initial call to the jQuery library.
  4. Locate the code that hooks up the slider. It should look something like the following:
jQuery(document).ready(function($) {
    $('#slider').nivoSlider({
		    effect: 'fade',
			animSpeed: 700,
			pauseTime: 4000
		});
});

Change the hook above to look something like this:

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

	if ("ontouchstart" in document.documentElement) {
 
		$('#slider').nivoSlider({
		    effect: 'slideInLeft',
			animSpeed: 700,
			pauseTime: 4000
		});

		$('a.nivo-nextNav').css('visibility', 'hidden');
		$('a.nivo-prevNav').css('visibility', 'hidden');
		
			var element = document.getElementById('slider');
			
			var hammertime = Hammer(element).on("swipeleft", function(event) {
				$('#slider img').attr("data-transition","slideInLeft");
				$('a.nivo-nextNav').trigger('click');
				return false; 
							
			});
				
			var hammertime = Hammer(element).on("swiperight", function(event) {
				$('#slider img').attr("data-transition","slideInRight");
                $('a.nivo-prevNav').trigger('click');
                $('#slider img').attr("data-transition","slideInLeft");
                return false;
							  		
			});
 
	}

	else {
  
		$('#slider').nivoSlider({
		    effect: 'fade',
			animSpeed: 700,
			pauseTime: 4000
		});
    
    }

});

It’s pretty self explanatory so I’m not going to go through each line, but here is the gist of what happens. If a touch screen is detected, then it will set up the Nivo Slider for a touch screen. If a touch screen is not detected, then it will load as originally intended.

You could easily modify the previous code snippet to display or hide other aspects of your slider if a touch screen is detected. For example, instead of hiding the previous and next arrows, apply a new CSS class that has a sprite background of two arrows that say swipe under them to encourage your audience to swipe at your slider.

Please note that these code snippets will work with the standard jQuery version of the Nivo Slider. THIS WILL NOT WORK WITH THE NIVO WORDPRESS PLUGIN. I have always set up my sliders as custom post types while leveraging the native Featured Image functionality and add_image_size when working with WordPress.

26 thoughts to “Nivo Slider Swipe Navigation for Touch Screens”

  1. Hey Will,

    I tried to install your code but I got an “unexpected ‘ontouchstart’ ” error in my php.

    Maybe I was to nooby to install it properly. How do I do the first step? Where can I do that? “call it in your source code right after the initial call to the jQuery library.”
    I use a wordpress theme that has nivoslider preinstalled but unfortunately it doesn’t support touch gestures and even hides the navigation arrows on mobile devices in portrait mode (in landscape it works strangely).

    Thanks for your Time

    1. Hey! Please post a link to the page you are working with in this thread. OR if you would rather not do that, use the contact form and shoot me an email with the link. Thanks!

  2. Will – do you have a demo of your implementation on the web somewhere that I can get my client to test on his Android device to see if its a problem with my implementation of if it just doesn’t work on his Android device?

    1. Hey Jon,

      Yes. Try out http://wdd.gmu.edu. There is a slider on the front page that is using this tutorial. I also checked the functionality in my Android Emulator that is running 4.1.2 and it appears to be working just fine. Please let me know if you need any more information or help.

      Thanks!

      1. Thanks – will see if it works on clients device and report back. How true are the emulators?

      2. My client is suggesting that the swipe gesture on Android is likely attempting to intiate the transition – as it seems to be making the CPU work – but the transition does not result from a swipe gesture on Samsung Nexus Android device running Chrome with latest Android image or LG Google Nexus 4 running Chrome with latest Android image. Do you have an Android device you can test on rather than the emulator? Emulators never seem to truly reflect the actual device ability in my experience… Desperate to understand what the issue with this code is on Android mobile devices….

        Any ideas?

        1. What version of jQuery mobile are you using? I have a Nexus 7 running 4.4.2 and it appears to be broken. The issue is documented here: https://github.com/jquery/jquery-mobile/issues/6805. I’m going to spend a little time looking for a solution to the issue, but probably won’t get around to it until tonight. If you happen to stumble on a solution before me, please let me know and post the updated code on this site. I will update this post and give you credit.

          Thanks!

          1. OK thanks Will. I will see what I can find as well – appreciate the effort in trying to get this patched up and working on Android – be a shame if Android was not supported here.

          2. Actually, the more I’m reading about this bug the more I feel the issue is in Android. Swipe functionality seems to be broken across multiple mobile frameworks (https://github.com/jquery/jquery-mobile/issues/6805, https://github.com/madrobby/zepto/issues/823, and https://github.com/soyjavi/QuoJS/issues/101).

            Some of the hacks suggest you use event.preventDefault(); as a means to get the swipes to register, but it’s a hack and not a very good one at that. Please let me know if you find a good solution!

          3. Thanks Will – seems a real mess doesnt it! I am using jQuery Mobile 1.4.1 btw – if I was to use event.preventDefault(); how would that slot into the code solution for this?

            1. Hey John, It’s been a pretty long time, but I’ve updated the post for Android 4.x.x!

    1. It should 100% work on Android devices with at least 4.0 installed. Not 100% sure about Android 2.2 or 2.3.

      1. OK thanks Will. HI have a bug report suggesting its not working on Android – I will find out which version Android OS they are running

  3. Thank you very much for this code!

    I was wondering if it would be possible to apply the swipe function to multiple nivo sliders on the same page. As it is now, if there are multiple sliders, you can only swipe the top slider. The other sliders will not respond to direct swipes, as far as I can tell, but they will respond to swipes performed on the top slider.

      1. It’s a personal project, but I could email you the link. Unfortunately, I can’t seem to get your ‘I just need to ask you a question’ to work on your contact page.

  4. Thanks a lot, that code really helped me.
    By the way you can do a bit shorter:


    $('#slider').nivoSlider(); // Settings

    if(jQuery.support.touch){
    // Your code
    }

  5. I’ve gotten fade as default and for touch devices swipe left and right are working well. I’d like to change the default animSpeed on swipe events to allow for a quicker feel when swiping. Is this possible?
    Thanks.

    1. Hey Greg,

      Sorry, I just saw this comment. You can change the animation speed. If you are using my example code from this post, then you would change:

      $('#slider').nivoSlider({
                              effect: 'slideInLeft',
                              animSpeed: 250, // Slide transition speed
                              pauseTime: 9000 // How long each slide will show
                          });
      });

      to:

      $('#slider').nivoSlider({
                              effect: 'slideInLeft',
                              animSpeed: 100, // Slide transition speed
                              pauseTime: 9000 // How long each slide will show
                          });

      I changed the animation speed from 250 to 100, but you could go even lower if you wanted.

  6. Nice! Thanks very much for this. I hopefully presume that native swipe functionality will be in the next version of Nivo Slider, but we’ve been aching for it in the meantime.

    One question: Is there a way to assign different effects to swipeleft and swiperight, rather than using the same one for both? Ideally the would be slideInLeft and slideInRight respectively. Using either one right now makes one or the other action transition in a way that is counter-intuitive.

    Thanks again!

    1. Hey, you are right! The image should slide in the direction of the swipe. I’ve updated the code in this post. Now images slide in the correct direction. Thanks for the great suggestion!

      1. Brilliant! Thanks so much, Will. I greatly appreciate the enhancement — and the lighting-quick update.

Leave a Reply

Your email address will not be published. Required fields are marked *