Adding touch swipe to responsiveslides.js

Question

I am currently trying to add the ability to swipe left and right on touch devices between slides. I am using http://www.responsiveslides.com and http://labs.rampinteractive.co.uk/touchSwipe/demos

I know there are plugins that do both, but I love the simplicity of rs, and touchSwipe seems really handy.

In responsive slides there is the ability to have manual controls using manualControls, however I think this may only work with selectors. I can check whether the swipe event has happened, however I am unsure how to bind this to a next and prev trigger.

    $(function () {
        $(".rslides").responsiveSlides({
            auto: true,
            pager: false,
            speed: 400,
            timeout: 5000, 
            nav: false,
            prevText: "",
            nextText: "",
            navContainer: "",
            manualControls: function(){
                swipeSlides();             
            }
        });

        function swipeSlides(){
            $(".rslides").swipe( {
                swipe:function(event, direction) { 
                console.log("you swiped " + direction);

                if (direction == "right"){
                    console.log("right");
                }
                if (direction == "left"){
                    console.log("left");
                }
            },
            threshold:0
            });
        }       
        swipeSlides();          
    });

Thank you!

score 1 · Answer 1 · answered Oct 29 '14 at 06:01

You might have solved this problem already, just for someone who is encountering similar issue, this is what I did

$(".castle-bg").responsiveSlides({
    nav: true,
    pager: true,
    navContainer: "#pager"
});
$(".castle-bg").swipe( {
    swipeLeft: function(){
        $(".rslides_nav.prev").click();
    },
    swipeRight: function(){
        $(".rslides_nav.next").click();
    }
});

And then use css to hide the actual prev and next button

Adding touch swipe to responsiveslides.js

1 Answers1