Question

拖动手势干扰了jQuery UI和slick carousel plugin（也是jQuery）的滑块。请参阅我的示例here。

HTML

<div class="stack">
    <div class="boxes">
         <h1>1</h1>
         <div class="slider"></div>
    </div>
    <div class="boxes">
        <h1>2</h1>
    </div>
    ...
</div>

JS

$('.stack').slick({
    centerMode: true,
    centerPadding: '80px',
    arrows: false,
    variableWidth: true,
    dots: true,
    swipeToSlide: true,
    focusOnSelect: true
});

$('.slider').slider({
    max: 100,
    min: 0,
    value: 93
});

如何解决此问题？

Answer 1

由于您的<div class="slider">是<div class="stack">的孩子，因此您可以尝试stopPropagation() slider中传播到slick轮播的事件，从而使其轻扫。这似乎很棘手但是因为没有方法可以停止并启动slick这是实现目标的简单方法。所以你可以使用：

$(".slider").on("slide mouseenter mousedown",function(event){
    event.stopPropagation();
});

您可以在此工作中看到结果 JSFIDDLE

希望这有帮助，

jQuery UI Slider干扰与光滑的轮播

1 个答案: