15

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.

RCNeil
  • 8,581
  • 12
  • 43
  • 61

6 Answers6

30

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"
Mike
  • 1,199
  • 1
  • 15
  • 24
  • 2
    Wow man, thanks for this! So, then, for when a specific selected element is called for TouchSwipe, say "swipecarousel", I could place `$('#swipecarousel').swipe({ excludedElements:"button, input, select, textarea, .noSwipe"; })` to achieve the result I'm looking for? – RCNeil May 09 '13 at 20:21
  • 2
    Longer answer: There is a default variable area in jquery.touchSwipe.js where you can change `$.fn.swipe.defaults.excludedElements` if, like me, you have swipable menus full of anchor links. Then you don't have to specify on each element. – Mike May 09 '13 at 21:50
8

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');
  }
});
Stanley Shauro
  • 749
  • 8
  • 12
  • +1 worked perfectly. Just taking the a tag out of the excluded elements didn't work on Chrome Android, but worked for everything else. This one worked for everything. – nerdarama Sep 10 '13 at 23:26
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.

RCNeil
  • 8,581
  • 12
  • 43
  • 61
1

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.

Sabrina
  • 298
  • 1
  • 2
  • 7
1

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

Community
  • 1
  • 1
user3223427
  • 11
  • 4
0

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

Ignacio Correia
  • 3,611
  • 8
  • 39
  • 68
  • 3
    thank you for your input, but my question pertains to TouchSwipe and its functionality with links, not just in general. Your demo includes no link tags, but if it did, you would notice that the swipe functions (at least with fingers on mobile devices) do not work. That is what my question is pertaining to. – RCNeil Mar 28 '13 at 20:17