delay the slick slide before starting the slick transition to next slide via clicking dots

[joshmoto]

> short description of the bug / issue, provide more detail below.

I am trying to delay the slide transition starting by 1 second after clicking the dots pager.

====================================================================

###### [ paste your jsfiddle link here ]

https://jsfiddle.net/joshmoto/Lcaung0w/

====================================================================

#### Steps to reproduce the problem

I am adding a .closed class to my current slick slide beforeChange, but also trying to delay the slide start transitioning by 1 second.

When the.closed class is added, it sets the height of the current slide to 0px !important. I am using transition: height 1s ease-in-out css to animate the height down to 0px. The slides have a fixed height so the animation works fine.

But I am struggling to delay the slide by 1 second beforeChange. The slick slide transitions instantly and the .closed css transition (1 second) is missed.

Can you help me delay the slide by 1 second before the slick transition starts changing to the next slide.

====================================================================

#### What is the expected behaviour?

The expected behaviour is that the when I click the dots pager buttons, the slick slider transition is delayed by 1 second. But I want to add my .closed class immediately (which works) but then the css height animation is missed, because the slide begins transitioning instantly. My speed is set to 0 because I don't want any transition effect on the slide itself. I am trying to make my own custom transition effect by adding/removing class.

====================================================================

#### What is observed behaviour?

The 1 second delay is ignored in the beforeChange function.

====================================================================

#### More Details

Using latest slick and jQuery.

For years I've been using slick because it is the last carousel you'll ever need, but today I have found an issue I cant work arround!

https://stackoverflow.com/questions/52459659/delay-the-slick-slide-before-starting-the-slick-transition-to-next-slide

[amoralesdesign]

Any solution to this? When I click on my thumbnails in the slick sync mode very quickly, it doesn't change the slide.

[joshmoto]

You got any code? I was using the pager not the sync mode in my question. In the end managed to use beforeChange and afterChange to handle animations on the slide. I'm not sure this will apply for you? Post your code if you are struggling.

[maxim-green]

Solved this problem by disabling the default "Prev", "Next" and dots buttons and creating my own, using slicks methods "slickPrev", "slickNext", and "slickGoTo" and "setTimeout" function. Here's the code:

document.addEventListener("DOMContentLoaded", function() {
    // Set the transition delay here
    const sliderTransitionDelay = 500;

    // get the number of slides
    let slidesNumber = $('.slider__inner').children().length;

    // Init your slick-slider. Disable the default arrows and dots - w'll create these elements later.
    $('.slider__inner').slick({
        arrows: false,
        dots: false
    });

    // Creating the "Prev" and "Next" buttons.
    $('.slider').append('<div class="slider__buttons"><button class="slider__prev">Prev</button><button class="slider__next">Next</button></div>');

    // Creating the dots buttons
    $('.slider').append('<ul class="slider__dots"></ul>');
    for (let i = 0; i < slidesNumber; i++) {
        let dot = '<li><button class="slider__dot" data-slide-index="' + i + '">' + i + '</button></li>';
        $('.slider__dots').append(dot);
    }

    // Dot click actions
    $('.slider__dots button').click(function(e) {
        // Getting an index of a target slide
        slideIndex = $(e.target).attr('data-slide-index');

        // Doing some actions here, i.e. animations
        $('.slider__content')
        .removeClass('animate__animated animate__backInUp')
        .hide()
        .addClass('animate__animated animate__backOutUp')
        .show();

        // Delay until the slide is changed
        setTimeout( () => {
            $('.slider__inner').slick('slickGoTo', slideIndex);
        }, sliderTransitionDelay)
    });

    // Next button actions
    $('.slider__next').click(function(e) {

        // Doing some actions here, i.e. animations
        $('.slider__content')
        .removeClass('animate__animated animate__backInUp')
        .hide()
        .addClass('animate__animated animate__backOutUp')
        .show();

        // Delay until the slide is changed
        setTimeout( () => {
            $('.slider__inner').slick('slickNext');
        }, sliderTransitionDelay)
    });

    // Prev button actions
    $('.slider__prev').click(function(e) {

        // Doing some actions here, i.e. animations
        $('.slider__content')
        .removeClass('animate__animated animate__backInUp')
        .hide()
        .addClass('animate__animated animate__backOutUp')
        .show();

        // Delay until the slide is changed
        setTimeout( () => {
            $('.slider__inner').slick('slickPrev');
        }, sliderTransitionDelay)
    });

    // Some actions after slide is changed
    $('.slider__inner').on('afterChange', (event, slick, direction) => {

        $('.slider__content')
        .removeClass('animate__animated animate__backOutUp')
        .hide()
        .addClass('animate__animated animate__backInUp')
        .show();

    })

});

Here's the markup:

<div class="slider">
    <div class="slider__inner">
        <div class="slider__item">
            <div class="slider__item-inner">
                <div class="slider__content">
                    <h1 class="slider__title">Lorem ipsum, dolor sit amet</h1>
                    <p class="slider__text">Lorem ipsum dolor sit amet</p>
                </div>
            </div>
        </div>
        <div class="slider__item">
            <div class="slider__item-inner">
                <div class="slider__content">
                    <h1 class="slider__title">Lorem ipsum, dolor sit amet</h1>
                    <p class="slider__text">Lorem ipsum dolor sit amet</p>
                </div>
            </div>
        </div>
        <div class="slider__item">
            <div class="slider__item-inner">
                <div class="slider__content">
                    <h1 class="slider__title">Lorem ipsum, dolor sit amet</h1>
                    <p class="slider__text">Lorem ipsum dolor sit amet</p>
                </div>
            </div>
        </div>
    </div>
</div>