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:
- After installing Vinaora’s Nivo Slider, copy
modules/mod_vt_nivo_slider/tmpl/_script.php
tohtml/mod_vt_nivo_slider
within your template directory. - In
_script.php
, within the jQuery window load function, add the following lines below the nivoSlider initialization:This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersjQuery('#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; }); - 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.
- Include the custom Javascript package within the head of your template
index.php
page.