CarouFredSel Plugin using TouchSwipe with links no

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 carousel elements are divs, within the div is an image and text wrapped in an <ahref> tag.

Everything works as it should, but I've noticed that if the carousel element (in this case a div) includes a link, the swipe effect on various mobile devices does not work.

If I remove the link around the image/text, the swiping motion works fine. It's almost as if preventDefault() is working in reverse. If I remove the link around the image, and leave the text as a link, the swiping works for the image, and not the text.

I can easily click the item as a link, I just cannot swipe if it IS a link.

Has anyone experienced this problem with CarouFredsel in particular?

Many thanks, SO.

Answer 1

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 2

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 3

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 4

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

Answer 5

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 6

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.