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

【问题标题】：How to avoid repetition of carousel items in react-slick如何避免在 react-slick 中重复轮播项目
【发布时间】：2018-02-13 07:35:00
【问题描述】：

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

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

这是我的代码：

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

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

谢谢

【问题讨论】：

我认为这是因为您将 infinite 设置为 true。尝试将其设置为 false 并检查。
是的。它正在工作。非常感谢。

标签： reactjs react-slick

【解决方案1】：

infinte : items.length >3;

让设置 = { 幻灯片显示：3，箭头：错误，无限：megaProjects.length > 3， slidesToScroll: 3, 自动播放：是的，自动播放速度：8000，延迟加载：是的， }

【讨论】：

【解决方案2】：

由于infinite 提供为true，它会重复填充所有4 个位置。所以它试图找到四个项目，但最终一次又一次地找到相同的项目。为了获得您想要的行为（即它在两个方向上无限滚动），我建议您动态设置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>

【讨论】：