0

I'm encountering an issue with react-slick where upon first-loading the page the last slide is being displayed first while the pagination-dots are on a disabled state(this indicating that the autoplay has not yet begun), after the autoplay begins it slides into the actual first slide and pagination-dots indicates correctly(react-slick here works fine onwards, issue lies on first load of page only).

Has anyone had the same issue?

Here's the code for my sliderParams:

const sliderParams = {
 className: `slider-container ${styles['slider-container']}`,
 autoplay: true,
 speed: 1000,
 autoplaySpeed: 3000,
 dotsClass: `slick-dots ${styles.dots}`,
 dots: true,
 slidesToShow: 1,
 slidesToScroll: 1,
 infinite: true,
 nextArrow: <NextArrow />,
 prevArrow: <PrevArrow />,
};

Thanks in advance for any help!

KvnG.
  • 658
  • 1
  • 7
  • 17

2 Answers2

1

In my case, it was due to dynamically changing data.

  <Slider {...settings}>
    {data.map((item, index) => (
      <HomeDropProxy item={item} key={index} />
    ))}
  </Slider>

So I added a condition:

{data.length > 0 && (
    <Slider {...settings}>
      {data.map((item, index) => (
        <HomeDropProxy item={item} key={index} />
      ))}
    </Slider>
)}
Nagibaba
  • 4,218
  • 1
  • 35
  • 43
0

For those looking for a solution I have found one by going through the comment sections here:

https://github.com/akiran/react-slick/issues/1171

Apparently this is a bug that hasn't yet been fixed based on what I have read in the forumn(please correct me if I'm wrong).

Solution to my issue:

infinite: slides.length > 3

Now upon page loads, my first slide is displaying the actual first slide instead of the last slide.

Cheers

KvnG.
  • 658
  • 1
  • 7
  • 17