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 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

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"