Question

我正在使用令人敬畏的CarouFredSel JQuery轮播插件，其中包含用于集成手持设备的JQuery TouchSwipe库的功能。

轮播元素是div，div中的图像和文本包含在<ahref>标记中。

一切都按预期工作，但我注意到如果轮播元素（在本例中为div）包含链接，则对各种移动设备的滑动效果不起作用。

如果删除图像/文本周围的链接，则滑动动作正常。这几乎就像preventDefault()正在反向运作一样。如果我删除图像周围的链接，并将文本保留为链接，则滑动适用于图像，而不是文本。

我可以轻松点击该项目作为链接，如果它是一个链接，我就是无法刷卡。

有没有人特别遇到CarouFredsel这个问题？

非常感谢，所以。

Answer 1

默认情况下，元素会禁用Touchswipe。

请参阅http://labs.rampinteractive.co.uk/touchSwipe/demos/Excluded_children.html

从链接：默认情况下，$ .fn.swipe.defaults.excludedElements的值为“button，input，select，textarea，a，.noSwipe”。要替换或清除列表，请重新设置excludedElements数组。要附加到它，请执行以下操作（不要忘记正在进行的逗号）...

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

我最后只更改了插件中的默认值，因为我的所有模态都是锚元素的子项。

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

Answer 2

carouFredSel ＆lt; a＆gt; 对我来说不适用于刷卡'内部'。您可以使用 excludedElements ，但在Ipad上，您必须坚持使用＆lt; a＆gt; （longTap）。这对用户来说并不好。如果您尝试使用carouFredSel（{swipe :(选项{tap：function ...它将无效（至少在我的情况下）。

我的解决方案是分别使用滑动（touchSwipe）：

$(".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 3

好吧，我真的很想知道是否可以在TouchSwipe和CarouFredSel插件中使用链接，但我找到了一个似乎有用的解决方法。

希望它会帮助某人。

我最终使用了第二个触摸jquery库TouchWipe。

当调用CarouFredSel插件时，我将滑动参数设置为true：

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

然后，同时调用TouchSwipe和Touchwipe库（不确定这是否重要，但我使用常规的TouchSwipe swipe:true参数用于另一个没有链接的滑块），我写了一个单独的函数来调用自定义事件TouchWipe插件：

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

希望这有助于某人，但我真的很想知道TouchSwipe和CarouFredSel是否可以使用<a href>标签，因为我找不到任何实际工作示例。

Answer 4

Caroufredsel已经集成并与touchswipe兼容。

添加tochswipe js library
在caroufresel配置中添加触摸事件

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 5

感谢使用excludedElements的解决方案，这也解决了我的问题。没想到这一点。

但是你不必单独使用touchwipe插件，在caroufredsel插件中有“swipe.options”作为touchswipe的配置选项。见the caroufredsel options

我认为你可以使用所有options of the touchswipe plugin。

Answer 6

您可以使用以下功能在滑动后启用点击。

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

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

使用TouchSwipe的CarouFredSel插件，链接不起作用

6 个答案:

JAVASCRIPT RESULT

Here is a working demo