I have two synced slick carousels with some custom css classes. I want the carousel to do some functions on afterchange & beforechange callbacks. The problem is that I don't want those functions to be executed if the carousel is being used with navigation but only if user focus-selects one slide. I can't make this work since the return in console log is always the whole carousel container and not the prev/next button. Any idea how to achieve what I want ?

The carousel is working exactly as I want it to but just this one breaks it. Please provide me some tips! Thanks in advance.

Here is the script:

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

I have two synced slick carousels with some custom css classes. I want the carousel to do some functions on afterchange & beforechange callbacks. The problem is that I don't want those functions to be executed if the carousel is being used with navigation but only if user focus-selects one slide. I can't make this work since the return in console log is always the whole carousel container and not the prev/next button. Any idea how to achieve what I want ?

The carousel is working exactly as I want it to but just this one breaks it. Please provide me some tips! Thanks in advance.

Here is the script:

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

• javascript
• jquery
• callback

1 Answer 1

if you want to check if the user is actually clicking only on the prev/next buttons inside .cocktails-carousel to execute the beforechange and afterChange you can have a simple approach:

set a boolean variable which will be set to true only when user clicks on those specific buttons, and back to false at function end.

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

If instead (did not understand properly) you want these functions to be exectued only if the user has its focus on a slide you can use a similar approach pointing the click on the slide and not the nav buttons:

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

fiddle for second option here: https://jsfiddle/woptima/6j32mep6/1/