CODEWITHSUNDEEP
jqueryslick.js
Dom
Dom

Reputation: 3126

Slow down slick before next slide

I've been looking around for a while now, but can't find a solution.

Basically, in my slick slider, I have text which I would like to animate on slick in and before next slick (after clicking arrows/dotts.

mySlick.slick({
        infinite: true,
        slidesToShow: 1,
        slidesToScroll: 1,
        fade: true,
        arrows: true,
        dots: true,
        autoplay: false,
        waitForAnimate: false,
        prevArrow: '<i class="icon-caret-left"></i>',
        nextArrow: '<i class="icon-caret-right"></i>',
    });

I have tried

mySlick.on('beforeChange', function(event, slick, currentSlide, nextSlide) {

    // Run an animation before next slide comes in.
    mySlick.slickPause();

    setTimeout(function() {

            // add animation class

            mySlick.slickNext();

    }, 2000);
}

Is there any way I can set the pause before playing next slide?

Thanks in advance.

Upvotes: 1

Views: 2188

Answers (1)

ztrat4dkyle
ztrat4dkyle

Reputation: 2187

By the looks of it you may be binding the event after initializing slick. You'll need to bind your 'beforeChange' event before the initialization of slick. So,

// bind your events:
mySlick.on('beforeChange', function() {
  // what to do before change
})

// then initialize slick:
mySlick.slick({
  // slickslider options
})

Also, call methods like slickNext within the .slick() function as a string, like .slick('slickNext')

In your case you'll also want to add the animation outside of the SetTimeout for it to display for 2 seconds and then change. So,

mySlick.on('beforeChange', function(event, slick, currentSlide, nextSlide) {
  mySlick.slick('slickPause');
  // add animation class here

  setTimeout(function() {
    mySlick.slick('slickNext');
  }, 2000);
}

In slick 1.4, callback methods were deprecated and replaced with events. Again, use them before the initialization of slick.

Upvotes: 1

Related Questions