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 data中有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

我通过设置无限条件

对其进行了修复

infinte：items.length> 3;

'让设置= { slidesToShow：3，箭头：错误，无限：megaProjects.length> 3， slidesToScroll：3，自动播放：是的，自动播放速度：8000， lazyLoad：是的， } '

如何避免在反应中重复旋转木马项目

2 个答案: