ResponsiveSlides.js Add touch (swipe) navigation

Add touch (swipe) navigation with related settings to enable touch (settings.touch) and to set the threshold (how far user needs to swipe to change the slide) (settings.touchThreshold).

May 22 '13 16:05 tshedor

:+1:

May 24 '13 17:05 o-l-e

This is a great idea, thank you! Few problems right now though:

Currently the implementation breaks vertical scrolling completely as it doesn't check if the user wants to scroll the page instead of changing slides (vertical swipe gesture).
Another problem is that it doesn't now work with the pager nav and update the current position.
I also had some problems while testing this on iOS and couldn't always get the slider to change a slide after a swipe, so I think they the code overall need a bit of adjusting before this could be merged into the master. or maybe the default 200px threshold is a bit too long :)

May 29 '13 05:05 arielsalminen

Hi, are there any thoughts on adding something like this? ResponsiveSlides is my favourite slider, and this would be a really nice feature.

Ps: If you do add swipe, please leave the option to keep the fade function when "not on touch". Browsing trough slideshows is so much more pleasant to the eye on keyboard devices, i think :)

Jun 23 '13 11:06 o-l-e

:+1:

Nov 21 '13 14:11 davidspiess

var xInitial=0;

function initTouchEmulado() { $("#slider1").on("touchstart", function(event) { xInitial= event.originalEvent.targetTouches[0].pageX;

}).on("touchmove", function(event) {
    xFinal = event.originalEvent.targetTouches[0].pageX;
}).on("touchend", function(event) {
    if(xFinal!=xInitial&&xFinal>xInitial)
    {
        $('.centered-btns2_nav.prev').trigger('click');
    }
    if(xFinal!=xInitial&&xFinal<xInitial)
    {
        $('.centered-btns2_nav.next').trigger('click');
    }


});

}

Then call initTouchEmulado() whenever you want. This function was made to emulate touch events in mobile devices.