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

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

无限 : items.length >3;

让设置 = { 幻灯片显示：3，箭头：错误，无限：megaProjects.length > 3，幻灯片滚动：3，自动播放：真实，自动播放速度：8000，懒加载：真， }

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

How to avoid repetition of carousel items in react-slick

reactjs

react-slick