javascript - jQuery UI slider 干扰光滑的轮播

Question

拖动手势会干扰来自 jQuery UI 的 slider 和 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"> 的 child 你可以试试stopPropagation()对于 slider 中的事件传播到 slick旋转木马激起它滑动。然而，这似乎很棘手，因为没有停止和启动 slick 的方法。这是实现目标的简单方法。所以你可以使用:

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

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

希望对您有所帮助，