jQuery UI 滑块干扰光滑的轮播

Question

拖动手势干扰了来自 jQuery UI 和 slick carousel plugin (also jQuery). See my example 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"> 的 children，您可以尝试 stopPropagation() slider 中的事件传播到 slick 轮播引起它滑动。这似乎很棘手，但是因为没有停止和启动 slick 的方法，所以这是实现目标的简单方法。所以你可以使用：

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

你可以看到这个工作的结果JSFIDDLE

希望这对您有所帮助，

jQuery UI 滑块干扰光滑的轮播

jQuery UI Slider Interference with slick carousel

javascript

jquery

jquery-ui