CarouFredSel Plugin using TouchSwipe with links not working

Question

I\'m using the awesome CarouFredSel JQuery carousel plugin which includes features for integrating the JQuery TouchSwipe library for handheld devices as well.

The caro

Answer 1

Caroufredsel is already integrated and compatible with touchswipe.

1. Add tochswipe js library
2. Add the touch events in the caroufresel configuration

JAVASCRIPT RESULT

 $(document).ready(function () {
     $('#foo2').carouFredSel({
         auto: false,
         responsive: false,
         items: {
             visible: 3,
             width: 100
         },
         width: 600,
         prev: '#prev2',
         next: '#next2',
         pagination: "#pager2",
         swipe: {
             onMouse: true,
             onTouch: true
         }
     });
 });

Here is a working demo

Answer 2

Thanks for the solutions with the excludedElements, that fixed my problem as well. Never thought of that.

But you don't have to use the touchwipe Plugin separately, there is "swipe.options" as a configuration option for touchswipe in the caroufredsel plugin. See the caroufredsel options

There you can use all options of the touchswipe plugin, I think.

Answer 3

Well, I'd really love to know if using links within TouchSwipe and the CarouFredSel plugin is possible, but I found a workaround that seems to work.

Hopefully it will help someone.

I ended up using a second touch jquery library, TouchWipe.

When, calling the CarouFredSel plugin, I set the swipe parameter to true:

$('#carousel-slider').carouFredSel({
        width: '100%',
        prev: '#prev-propslider',
        next: '#next-propslider',
        swipe: true
});

Then, calling both the TouchSwipe AND Touchwipe libaries (not sure if this matters, but I'm using the regular TouchSwipe swipe:true parameter for another slider without links), I wrote a separate function to call custom events for the TouchWipe plugin:

$('#carousel-slider').touchwipe({
        wipeLeft: function() {
            $('#carousel-slider').trigger('next', 1);
        },
        wipeRight: function() {
            $('#carousel-slider').trigger('prev', 1);
        }
});

Hopefully this helps someone, but I'd really love to know if TouchSwipe and CarouFredSel can work with <a href> tags as I cannot find any live working examples.

Answer 4

Touchswipe is disabled by default for a elements.

See http://labs.rampinteractive.co.uk/touchSwipe/demos/Excluded_children.html

From the link: By default the value of $.fn.swipe.defaults.excludedElements is "button, input, select, textarea, a, .noSwipe, " To replace or clear the list, re set the excludedElements array. To append to it, do the following (dont forget the proceeding comma) ...

excludedElements:$.fn.swipe.defaults.excludedElements+", #some_other_div" });

I ended up just changing the defaults in the plugin, since all my modals were children of an anchor element.

excludedElements:"button, input, select, textarea, .noSwipe"

Answer 5

The carouFredSel with < a > doesn't work for me well with swipe 'inside'. You can use excludedElements, but on Ipad you'll have to hold your finger to use < a > (longTap). That's not good for users. If you try to use carouFredSel({ swipe:( option { tap: function ... it won't work (at least in my case).

My solution is to use swipe (touchSwipe) separately:

$(".carusel").swipe({
  excludedElements: "button, input, select, textarea, .noSwipe",
  swipeLeft: function() {
    $('.carusel').trigger('next', 4);
  },
  swipeRight: function() {
    $('.carusel').trigger('prev', 4);
  },
  tap: function(event, target) {
    window.open($(target).closest('.carusel-cnt').find('carusel-cnt-link').attr('href'), '_self');
  }
});

Answer 6

You can use below function to enable click after swipe.

`$('.class').swipe({
  swipe: function(event, direction, distance, duration, fingerCount) {},
  click: function(event, target) {
    $(target).click();
  },
  threshold: 75
});`

https://stackoverflow.com/a/11919170/3223427