如何避免在 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 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

我通過設置無限條件來修復它

無限：items.length >3;

' let settings = { slidesToShow: 3, arrows: false, infinite: megaProjects.length > 3, slidesToScroll: 3, autoplay: true, autoplaySpeed: 8000, lazyLoad: true, } '