CarouFredSel插件使用TouchSwipe的链接不工作(CarouFredSel Plug

2019-08-17 12:20发布

我使用的是真棒CarouFredSel JQuery的旋转木马插件,它包括用于集成功能的JQuery TouchSwipe库,用于手持设备为好。

转盘元件的div,内DIV是图像和文本包裹在一个<ahref>标记。

一切正常,因为它应该,但我注意到,如果传送带元素(在这种情况下,一个div)包含一个链接,在各种移动设备上刷一下效果不起作用。

如果我删除周围的图像/文本中的链接时,刷运动正常工作。 这是几乎一样,如果preventDefault()以相反的工作。 如果我删除图像周围的链接,并留下文字为纽带,挥动工程为图像,而不是文字。

我可以轻松地点击项目为纽带,我如果是一个链接就不能刷卡。

任何人都经历了这个问题CarouFredsel特别?

非常感谢,SO。

Answer 1:

Touchswipe被默认为禁用的元素。

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

从链接:默认情况下$ .fn.swipe.defaults.excludedElements的值是“按钮,输入,选择,文本区域,一,.noSwipe,”要更换或清除该列表,重新设置excludedElements阵列。 要追加到它,请执行下列操作(不要忘了诉讼逗号)...

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

最后我只是改变了插件的默认值,因为我所有的情态动词是定位元素的儿童。

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


Answer 2:

该carouFredSel与<一>不为我用刷卡的工作以及“内部”。 您可以使用excludedElements,但在iPad上,你必须用手指按住使用<一>(longTap)。 这不是很好的用户。 如果您尝试使用carouFredSel({刷卡:(选项{龙头:功能......它不会(至少在我的情况)工作。

我的解决办法是单独使用刷卡(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 libaries(不知道这重要的,但我使用的常规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兼容。

  1. 添加tochswipe JS库
  2. 添加触摸事件的caroufresel配置

JAVASCRIPT结果

 $(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
         }
     });
 });

这是一个工作演示



Answer 5:

感谢您与excludedElements的解决方案,即固定我的问题也是如此。 从来没有想到这一点。

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

在那里,你可以使用所有的touchswipe插件的选项 ,我想。



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



文章来源: CarouFredSel Plugin using TouchSwipe with links not working