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 fixed it by setting infinite conditional

infinte : items.length >3;

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