带有光滑轮播的jQuery UI Slider干扰 [英] jQuery UI Slider Interference with slick carousel

问题描述

拖动手势干扰了jQuery UI和光滑轮播插件(也包括jQuery)中的滑块).请参阅我的示例此处.

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

如何解决此问题?

解决方案

由于您的<div class="slider">是<div class="stack">的子级，因此您可以尝试stopPropagation()处理stopPropagation()中的事件，该事件传播到slick轮播激怒它滑动.但是，这似乎很棘手，因为没有停止和启动slick的方法，这是实现目标的简便方法.因此，您可以使用:

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

您可以在此有效的 JSFIDDLE

希望这会有所帮助，

The drag gesture is interfering with the slider from jQuery UI and the 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
});

How can I resolve this issue?

解决方案

Since your <div class="slider"> is a children of <div class="stack"> you can try to stopPropagation() for the events in slider which propagates to slick carousel provoking it to swipe. This seems tricky however since there is no method to stops and start the slick it's an easy approach to achieve your goal. So you can use:

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

You can see the result in this working JSFIDDLE

Hope this helps,

这篇关于带有光滑轮播的jQuery UI Slider干扰的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！