How to create slider with 5 second pause time on centre and speed 5 second without long initial delay

[ajithv11]

Hi,

I need to make react slick slider that is sliding with speed 5000 milli seconds and pause on the centre for 5 seconds. I could achieve this with the settings given below but I face an issue that the slide item on centre stay for 10 seconds on initial load. My settings is given below

var carouselSettings = {
    arrows          : false,
    dots            : true,
    infinite                : true,
    slidesToShow    : 3,
    slidesToScroll  : 1,
    focusOnSelect   : true,
    autoplay        : true,
    centerMode         : true,
    speed           : 5000,
    autoplaySpeed   : 10000,
    adaptiveHeight    : true,
    cssEase         : "ease",
    responsive      : [
      {
        breakpoint: 768, settings: {slidesToShow: 1},
      },
    ],
};

The sliding works as expected , only issue is the inital waiting time of 10 second, Can someone help me to make initial waiting time also as 5 seconds?

[Germain24]

To achieve an initial waiting time of 5 seconds instead of 10 seconds, you can modify the autoplaySpeed property in your carouselSettings object. Currently, you have set autoplaySpeed to 10000, which means it waits for 10 seconds before transitioning to the next slide.

To have an initial waiting time of 5 seconds, you can set autoplaySpeed to 5000 instead :

var carouselSettings = {
  arrows: false,
  dots: true,
  infinite: true,
  slidesToShow: 3,
  slidesToScroll: 1,
  focusOnSelect: true,
  autoplay: true,
  centerMode: true,
  speed: 5000,
  autoplaySpeed: 5000, // Updated to 5000 milliseconds
  adaptiveHeight: true,
  cssEase: "ease",
  responsive: [
    {
      breakpoint: 768,
      settings: { slidesToShow: 1 },
    },
  ],
};

[ajithv11]

@Germain24 I did this but the centre item is not staying for 5 seconds, It runs fast My above code is fine only issue is initial waiting time of center item 10 seconds

Is it possible to set autoplay as false initially and after 5 second on page load playit then set autoplay as true?

[akiran]

Yes, You can pause and play the slider with the auto play methods https://react-slick.neostack.com/docs/example/auto-play-methods