- Mark as New
- Bookmark
- Subscribe
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
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.
- Mark as New
- Bookmark
- Subscribe
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
Re: Jquery jcarousel and touchswipe, swipe affeting all carousels
It's because you're using same class names for all carousels.
- Mark as New
- Bookmark
- Subscribe
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
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'); }
});
});