Issue applying swipe function to two elements with same class

[DublDesign]

Hi,

first thank you for this plugin, just what I was looking for.

I have a problem with applying the swipe function to two elements with same class. I don't know if it's the plugin or if it's me messing something up again :).

That's the situation: I built a slider with GSAP-GreenSock plugin and jquery. I use buttons to move the slider forwards and backwards. So far everything works fine, now I want to use the same functions to move the slider by swiping. With a single slider it works fine, but as I use two instances of the slider on the same page, only the swipeLeft function works on both instances. The swipeRight function only works on the first instance and not on the second.

here is my code to trigger the swipe:

$(".customslider").swipe({
    swipeLeft:function(event, direction, distance, duration, fingerCount, fingerData) {
    goforward(this);
    }
});

$(".customslider").swipe({
    swipeRight:function(event, direction, distance, duration, fingerCount, fingerData) {
    goback(this);
    }
}); 

here are the functions to move the slider:

var forward = $(".forward");
var back = $(".back");

function goforward(that){
    TweenMax.killAll(true);
    var x = $(that).data("sliderno");
    var sliderbox = $(".customslider:eq("+x+") .sliderbox");
    var sliderpos = sliderbox.css("left").replace(/[^-\d\.]/g, '') *-1; //get currently visible slide
    var currentslide = (sliderpos / shell) + 1;
    var noslides = $(".customslider:eq("+x+") .slide").length; //number of slides in slider

    if (currentslide <= noslides-1) {
        TweenMax.to(sliderbox, 1, {css:{left: "-="+shell+"px"}});

        var nextslide = currentslide+1;
        $(".customslider:eq("+x+") [data-pos="+nextslide+"]").attr("data-active", "1");
        $(".customslider:eq("+x+") [data-pos="+currentslide+"]").attr("data-active", "0");

        TweenMax.from($(".customslider:eq("+x+") [data-pos="+currentslide+"]").next().children(".productdesc"), 1, {css:{left: "+=100%"}, ease:Quad.easeOut, delay:0.7});
        TweenMax.from($(".customslider:eq("+x+") [data-pos="+currentslide+"]").next().children(".productpic"), 1.5, {css:{left: "+=100%"}, ease:Quad.easeOut, delay:0});

    } else {
        TweenMax.to(sliderbox, 1.5, {css:{left: "0px"}}); 
        $(".customslider:eq("+x+") [data-pos=1]").attr("data-active", "1");
        $(".customslider:eq("+x+") [data-pos="+currentslide+"]").attr("data-active", "0");
    }   
}

function goback(that){
    TweenMax.killAll(true);
    var x = $(that).data("sliderno");
    var sliderbox = $(".customslider:eq("+x+") .sliderbox");
    var sliderpos = sliderbox.css("left").replace(/[^-\d\.]/g, '') *-1; //get currently visible slide (again var has only value in function above)
    var currentslide = (sliderpos / shell) +1;

    if (currentslide >= 2) {
        TweenMax.to(sliderbox, 1.5, {css:{left: "+="+shell+"px"}});

        var prevslide = currentslide-1;
        $(".customslider:eq("+x+") [data-pos="+prevslide+"]").attr("data-active", "1");
        $(".customslider:eq("+x+") [data-pos="+currentslide+"]").attr("data-active", "0");

        TweenMax.from($(".customslider:eq("+x+") [data-pos="+currentslide+"]").prev().children(".productdesc"), 1, {css:{left: "-=100%"}, ease:Quad.easeOut, delay:0.7});
        TweenMax.from($(".customslider:eq("+x+") [data-pos="+currentslide+"]").prev().children(".productpic"), 1.5, {css:{left: "-=100%"}, ease:Quad.easeOut, delay:0});
    } 
}

Here you will find a live version: undercut.lu/test/

Thanks in advance!

[mattbryson]

Hi, firstly you can combine your two calls into one...

$(".customslider").swipe({
    swipeLeft:function(event, direction, distance, duration, fingerCount, fingerData) {
       goforward(this);
    },
        swipeRight:function(event, direction, distance, duration, fingerCount, fingerData) {
        goback(this);
    }
});

Try console logging the value that is passed into your goback handler, if it is you DOM element, then the issue is not with TouchSwipe.

Closing for now, feel free to re open if you are still working on it....