光滑的轮播滑块 更改前/更改后回调同步

Question

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

轮播完全按照我想要的方式工作，但只有这个破坏了它。请给我一些提示！提前谢谢。

这是脚本：

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中的上一个/下一个按钮来执行之前和之后的变化，你可以有一个简单的方法：

设置一个布尔变量，该变量仅在用户单击这些特定按钮时设置为 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/