CODEWITHSUNDEEP
javascriptjqueryhtmlcssslick.js
user7455781
user7455781

Reputation:

How to set the delay before changing slide?

I use Slick slider. I need to set the delay before changing slide, how can I realize this task?

Here is slider's JS-code:

  $(".intro__slider").slick({
    infinite: true,
    dots: true,
    dotsClass: "intro__dots",
    arrows: false,
    swipe: false,
    draggable: false
  });

  var introTitle = $(".intro__title"),
      introSlide = $(".intro__slide"); 

  $(".intro__slider").on("beforeChange", function () {
    introTitle.addClass("intro__title_hidden");
    introSlide.addClass("intro__slide_overlayed");
  });

  $(".intro__slider").on("afterChange", function () {
    introTitle.removeClass("intro__title_hidden");
    introSlide.removeClass("intro__slide_overlayed");
  });

Here is full code on codepen

Upvotes: 0

Views: 3853

Answers (3)

marcosvolpato
marcosvolpato

Reputation: 106

try this:

// On before slide change
$('.your-element').on('beforeChange', function(event, slick, currentSlide, nextSlide){

    setTimeout(function() {
        //your code to be executed after 1 second
    }, 1000);

});

Upvotes: 1

Renzo Calla
Renzo Calla

Reputation: 7686

you can use speed to 3000

$(".intro__slider").slick({
    infinite: true,
    autoplay: true,
    autoplaySpeed: 6000,
    dots: true,
    dotsClass: "intro__dots",
    arrows: false,
        speed:3000
  });

will make the transition in 3 sec, but it won't make a delay, to use a delay I would recommend to use your own dots buttons and the methods slickGoTo , slickNext

Upvotes: 0

Super User
Super User

Reputation: 9642

You can use autoplaySpeed: 3000, in slick options

$(".intro__slider").slick({
  autoplaySpeed: 3000,
  infinite: true,
  dots: true,
  dotsClass: "intro__dots",
  arrows: false,
  swipe: false,
  draggable: false
});

Upvotes: 0

Related Questions