Slick carousel Slider Syncing beforechange/afterchange 回调

Question

我有两个带有一些自定义 css 类的同步光滑轮播。 我希望轮播在 afterchange 和 beforechange 回调上执行一些功能。 问题是，如果轮播正在与导航一起使用，但只有在用户焦点选择一张幻灯片时，我不希望执行这些功能。我无法完成这项工作，因为控制台日志中的返回始终是整个轮播容器，而不是上一个/下一个按钮。知道如何实现我想要的吗？

旋转木马的工作方式完全符合我的要求，但只有这一个会破坏它。请给我一些提示！提前致谢。

这是脚本：

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

Answer 1

如果你想检查用户是否真的只点击 .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;
    });
}

这里选择第二个选项：https://jsfiddle.net/woptima/6j32mep6/1/