Jquery jcarousel and touchswipe, swipe affeting all carousels

[vpatel93]

I have used the jquery plugins jcarousel for displaying products in a slider via categories for each carousel, and touchswipe to add swipe gestures. However, the touchswipe is resulting the gesture occuring on carousels.

My Code:

(function($) {
    $(function() {
        var jcarousel = $('.jcarousel');

        jcarousel
            .on('jcarousel:reload jcarousel:create', function () {
                var width = jcarousel.innerWidth();

                if (width >= 600) {
                    width = width / 3;
                } else if (width >= 350) {
                    width = width / 2;
                }

                jcarousel.jcarousel('items').css('width', width + 'px');
            })
            .jcarousel({
                wrap: 'circular'
            });

        $('.jcarousel-control-prev')
            .jcarouselControl({
                target: '-=1'
            });

        $('.jcarousel-control-next')
            .jcarouselControl({
                target: '+=1'
            });

        $('.jcarousel-pagination')
            .on('jcarouselpagination:active', 'a', function() {
                $(this).addClass('active');
            })
            .on('jcarouselpagination:inactive', 'a', function() {
                $(this).removeClass('active');
            })
            .on('click', function(e) {
                e.preventDefault();
            })
            .jcarouselPagination({
                perPage: 1,
                item: function(page) {
                    return '<a href="#' + page + '">' + page + '</a>';
                }
            });
            $(".jcarousel").swipe({
            swipeLeft: function (event, direction, distance, duration, fingerCount) {
               $('.jcarousel-control-next').trigger('click');
            },
            swipeRight: function (event, direction, distance, duration, fingerCount) {
               $('.jcarousel-control-prev').trigger('click');
               
            },
            //Default is 75px+ set to 0 for demo so any distance triggers swipe
            threshold: 90,
               maxTimeThreshold:500,
          triggerOnTouchEnd:false,
          triggerOnTouchLeave:true,
            excludedElements: "label, button, input, select, textarea, .noSwipe",
            allowPageScroll:"vertical"
        });
    });
})(jQuery);

When I click the corresponding arrows for each of the carousels it works fine, but when I swipe it triggers clicks for all carousels. How can I target only the carousel that the gesture is occurring on ?

 $('.jcarousel-control-prev')
            .jcarouselControl({
                target: '-=1'
            });

I know this piece of code is responsible for in this instance going back by an index of 1 in the targeted carousel. But I tried to adapt this into the swipe code to no avail.

[Pronto]

It's because you're using same class names for all carousels.

[slyka85]

You just need to iterate through all your carousels and apply swipe to the current one like this

jQuery('.jcarousel').each(function() {

var carousel = jQuery(this);

carousel.swipe({
swipeLeft: function(event, direction, distance, duration, fingerCount) { carousel.jcarousel('scroll', '+=1'); },
swipeRight: function(event, direction, distance, duration, fingerCount) { carousel.jcarousel('scroll', '-=1'); }
});
});