如何避免在react-slick中重复轮播项目

Question

我正在使用反应光滑。我想一次显示四个项目。我正在动态显示数据。

如果我在轮播中有单个项目，则会重复填充四个项目的位置。

这是我的代码：

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

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

谢谢

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>