Question

我有两个同步光滑的旋转木马和一些自定义的CSS类。我希望旋转木马在afterchange＆amp ;;上做一些功能。 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/

光滑的旋转木马滑块同步前更改/后更改回调

1 个答案: