如何避免在反应速度中重复旋转木马

Question

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

如果我在旋转木马中有单个物品，则重复填充四个项目的位置。

这是我的代码：

const settings = {
    dots: false,
    infinite: true,
    speed: 500,
    slidesToShow: 4,
    slidesToScroll: 1,
};
<Slider {...settings}>
  //mapping data
</Slider>

谢谢

Answer 1

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

假设您在list中有mapping data，则可以动态设置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＆gt; 3;

让设置= {Slidestoshow：3，箭头：false，无限：megaprojects.length＆gt;3，slidestoscroll：3，自动播放：是的，Autoplayspeed：8000，懒惰：是的，}