How to avoid repetition of carousel items in react-slick

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

Solution

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>