Reactjs 如何避免在react slick中重复传送带项目

我用的是react slick。我想一次显示四个项目。我正在动态显示数据

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

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

如果旋转木马中有一个项目，它会重复以填充四个项目的位置

这是我的代码：

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

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

const设置={
点：错，
无限：是的，
速度:500,，
幻灯片放映：4，
幻灯片滚动：1，
};
//映射数据

---

谢谢

由于

infinite

以

true

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

slidesToShow

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

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

假设您在

列表中有
映射数据
，您可以动态设置
幻灯片显示
的数量

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

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

const设置={
点：错，
无限：是的，
速度:500,，
幻灯片显示：list.length>4？4:list.length，
幻灯片滚动：1，
};
//映射数据
我通过设置无限条件修复了它

infinte:items.length>3

'让设置={
幻灯片放映：3，
箭头：错，
无限：megaProjects.length>3，
幻灯片滚动：3，
自动播放：对，
自动播放速度：8000，
懒汉：没错，
}
“
我认为这是因为
infinite
设置为true。尝试将其设置为false并检查。是。它起作用了。非常感谢你。