cancel
Showing results for 
Search instead for 
Did you mean: 

Jquery jcarousel and touchswipe, swipe affeting all carousels

   Did you know you can see the translated content as per your choice?

Translation is in progress. Please check again after few minutes.

Jquery jcarousel and touchswipe, swipe affeting all carousels

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.

2 REPLIES 2

Re: Jquery jcarousel and touchswipe, swipe affeting all carousels

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

Tanel Raja

Re: Jquery jcarousel and touchswipe, swipe affeting all carousels

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'); }
});
});