Add Touch Navigation to Joomla’s Vinaora Nivo Slider

Thank you to Andrew Leach for his elegantly simple solution for adding touch navigation to Nivo Slider. To apply this to Vinaora’s excellent Nivo Slider extension for Joomla, follow these steps:

1. After installing Vinaora’s Nivo Slider, copy modules/mod_vt_nivo_slider/tmpl/_script.php to html/mod_vt_nivo_slider within your template directory.
2. In _script.php, within the jQuery window load function, add the following lines below the nivoSlider initialization:
   

   	jQuery('#vt_nivo_slider<?php echo $module_id; ?>').bind('swipeleft', function(e){
   	jQuery('a.nivo-nextNav').trigger('click');
   	e.stopImmediatePropagation();
   	return false;
   	});
   	jQuery('#vt_nivo_slider<?php echo $module_id; ?>').bind('swiperight', function(e){
   	jQuery('a.nivo-prevNav').trigger('click');
   	e.stopImmediatePropagation();
   	return false;
   	});

3. Use the jQuery Mobile Download Builder and check “Touch” under “Events” and download the custom Javascript package. This will dramatically reduce the size of the bundle required to enable the “swipeleft” and “swiperight” functionality.
4. Include the custom Javascript package within the head of your template index.php page.