How to avoid repetition of carousel items in react-slick

Question

I'm using react-slick. I want to show four items at a time. I'm showing data dynamically.

If I have single item in carousel, it's repeating to fill the place of four items.

This is my code:

const settings = {
    dots: false,
    infinite: true,
    speed: 500,
    slidesToShow: 4,
    slidesToScroll: 1,
};

<Slider {...settings}>
  //mapping data
</Slider>

Thank you

Answer 1

It repeats to fill all the 4 places since infinite is provided as true. So it try to find four items, but ends up finding the same item again and again. To get your desired behaviour(that is it scrolls infinitely in both directions), i suggest you set the slidesToShow dynamically.

Assuming you have your mapping data in list, you can set the number of slidesToShow dynamically.

const settings = {
 dots: false,
 infinite: true,
 speed: 500,
 slidesToShow: list.length > 4 ? 4 : list.length,
 slidesToScroll: 1,
};

<Slider {...settings}>
  //mapping data
</Slider>

Answer 2

**I am getting the same issue when I use react slick I got duplicate slide but then I import the style file after that my issue is resolve **

  import "slick-carousel/slick/slick.css"; 
   import "slick-carousel/slick/slick-theme.css";

Answer 3

infinte : items.length >3;

let settings = { slidesToShow: 3, arrows: false, infinite: megaProjects.length > 3, slidesToScroll: 3, autoplay: true, autoplaySpeed: 8000, lazyLoad: true, }