反応スリックでカルーセル項目の繰り返しを避ける方法

Question

私は反応スリックを使用しています。私は一度に4つのアイテムを表示したいです。私はデータを動的に表示しています。

カルーセルに1つのアイテムがある場合、それは4つのアイテムの場所を埋めるために繰り返しています。

これは私のコードです：

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

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

はinfiniteがtrueとして設けられているのでそれはすべての4ヶ所を埋めるために繰り返される

Answer 1

ありがとうございます。だから、それは4つのアイテムを見つけようとしますが、同じアイテムを何度も何度も見つけ出すことになります。あなたが望むふるまいを得るには（それは両方向に無限にスクロールする）、私はあなたが動的に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>