reactjs - 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

它重复填充所有 4 个位置，因为infinite它提供为true. 所以它试图找到四个项目，但最终一次又一次地找到相同的项目。为了获得您想要的行为（即它在两个方向上无限滚动），我建议您slidesToShow动态设置。

假设您有mapping datain list，您可以动态设置数量slidesToShow。

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

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

Answer 2

无限：items.length > 3；

让设置= { slidesToShow：3，箭头：false，无限：megaProjects.length > 3，slidesToScroll：3，自动播放：true，autoplaySpeed：8000，lazyLoad：true，}