Javascript 滑动转盘滑块同步更改前/更改后回调

我有两个与一些自定义css类同步的光滑旋转木马。 我希望旋转木马在afterchange和beforechange回调上执行一些功能。 问题是，如果旋转木马与导航一起使用，我不希望执行这些功能，但仅当用户焦点选择一张幻灯片时。我无法做到这一点，因为控制台中的返回日志始终是整个旋转木马容器，而不是prev/next按钮。知道如何实现我想要的吗

旋转木马完全按照我的要求工作，但只有这一个坏了。请给我一些提示！提前谢谢

以下是脚本：

jQuery(document).ready(function(){
    jQuery('.cocktails-target').slick({
        infinite:true,
        slidesToShow: 1,
        slidesToScroll: 1,
        arrows: false,
        fade: true,
        asNavFor: '.cocktails-carousel'
    });
    jQuery('.cocktails-carousel').slick({
        infinite:true,
        slidesToShow: 6,
        slidesToScroll:1,
        asNavFor: '.cocktails-target',
        focusOnSelect: true,
    });
});

jQuery('.cocktails-carousel').on('beforeChange', function(event, slick, currentSlide, nextSlide){
        console.log(event.currentTarget);
        jQuery('.cocktails-target').removeClass('closing');
        jQuery('.cocktails-target').removeClass('active');
        jQuery('.cocktails-carousel').addClass('disablehovers');
        jQuery('.cocktails-carousel .slick-active').addClass('nohover');
});
jQuery('.cocktails-carousel').on('afterChange', function(event, slick, currentSlide, nextSlide){
        console.log(event.currentTarget);
        jQuery('.cocktails-target').addClass('active');
        jQuery('.cocktails-carousel').removeClass('disablehovers');
});

---

如果您想检查用户是否只点击了.cocktails carousel中的prev/next按钮来执行beforechange和afterChange，您可以使用一种简单的方法：

设置一个布尔变量，仅当用户单击这些特定按钮时，该变量才会设置为true，并在函数末尾返回false

var arrowPressed = false;
$(document).on('click', '.cocktails-carousel .navBtnClass', function() {
   arrowPressed = true;
});

if(arrowPressed) {
    jQuery('.cocktails-carousel').on('beforeChange', function(event, slick, 
    currentSlide, nextSlide){
        console.log(event.currentTarget);
        jQuery('.cocktails-target').removeClass('closing');
        jQuery('.cocktails-target').removeClass('active');
        jQuery('.cocktails-carousel').addClass('disablehovers');
        jQuery('.cocktails-carousel .slick-active').addClass('nohover');
        arrowPressed = false;
    });
    jQuery('.cocktails-carousel').on('afterChange', function(event, slick, 
    currentSlide, nextSlide){
        console.log(event.currentTarget);
        jQuery('.cocktails-target').addClass('active');
        jQuery('.cocktails-carousel').removeClass('disablehovers');
        arrowPressed = false;
    });
}

相反，如果您没有正确理解，您希望仅当用户的注意力集中在幻灯片上时才能执行这些功能，您可以使用类似的方法，点击幻灯片而不是导航按钮：

var slideFocus= false;
$('.cocktails-carousel .slide').click(function(e) {
    e.stopPropagation()
    slideFocus= true;
})
$(document).click(function(e){
    if($(e.target).closest('.cocktails-carousel .slide').length){
        return;
    } else {
      slideFocus= false;
    }
});

if(slideFocus) {
    jQuery('.cocktails-carousel').on('beforeChange', function(event, slick, 
    currentSlide, nextSlide){
        console.log(event.currentTarget);
        jQuery('.cocktails-target').removeClass('closing');
        jQuery('.cocktails-target').removeClass('active');
        jQuery('.cocktails-carousel').addClass('disablehovers');
        jQuery('.cocktails-carousel .slick-active').addClass('nohover');
        arrowPressed = false;
    });
    jQuery('.cocktails-carousel').on('afterChange', function(event, slick, 
    currentSlide, nextSlide){
        console.log(event.currentTarget);
        jQuery('.cocktails-target').addClass('active');
        jQuery('.cocktails-carousel').removeClass('disablehovers');
        arrowPressed = false;
    });
}

---

第二个选项是：

非常感谢buxbeatz，我从来没有想过最简单的解决方案是设置布尔变量。再次感谢。