是否有任何方法来控制项目的数量，以显示每个幻灯片的反应-多重旋转木马?

Question

<Carousel
ssr
infinite={true}
itemClass="item"
responsive={responsive}
>
{data.map((item) => {
return (
<NavLink className='text' to='#'>
<Card className='card'>
<Card.Body> <div> <img
className='image'
src={item.image}
/> </div><span >{item.name}</span> </Card.Body>
</Card>
</NavLink>         
);
})}
</Carousel>

有没有办法把itemsToshow = {5}写在<Carousel>里就像我们在反弹性旋转木马里写的那样?我安装了npm 18，我认为它不支持react-elastic-carousel。

Answer 1

这些是通过响应变量处理的。查看items键，在这里我们可以提到要显示多少项。

const responsive = {
superLargeDesktop: {
// the naming can be any, depends on you.
breakpoint: { max: 4000, min: 3000 },
items: 5
},
desktop: {
breakpoint: { max: 3000, min: 1024 },
items: 6
},
tablet: {
breakpoint: { max: 1024, min: 464 },
items: 2
},
mobile: {
breakpoint: { max: 464, min: 0 },
items: 1
}
};