react material ui carousel:carousel无法正常使用显示器flex

Question

当我将转盘的显示设置为弯曲时，转盘没有正确显示图像

<div className="ProductDetails>
<div>
<Carousel animation='slide'>
{product.images && product.images.map((item, i) => (
<img
className='CarouselImage'
key={item.url}
src={item.url}
alt={`Slide ${i}`}
/>
))}
</Carousel>
</div>
</div>

CSS代码

.ProductDetails>div {
width: 100%;
justify-content: space-evenly;
align-items: center;
padding: 2vmax;
box-sizing: border-box;
border: 1px solid #fff;
display: flex;
flex-direction: column;
}

旋转木马图像未正确显示

Answer 1

<Carousel>
{product.images && [product.images].map((item, i) => (
<img>
className="CarouselImage"
key={item.url}
src={item.url}
alt={`${i} Slide`}
/>)
)
}
</Carousel>

在第二个"；product.images"；

Answer 2

尝试升级react-material-ui-carousel，他们可能在版本3.4.2更改日志中解决了您的问题

Answer 3

这是最新版本(即@3.4.2(的某种错误。请尝试安装以前的版本。在我的情况下，它适用于版本@2.3.1

您执行以下操作，然后重试

npm uninstall react-material-ui-carousel
npm install react-material-ui-carousel@2.3.1

Answer 4

我正在学习相同的教程，问题是您需要从映射中的回调函数返回。

<div className="ProductDetails>
<div>
<Carousel animation='slide'>
{product.images && product.images.map((item, i) => (
return <img
className='CarouselImage'
key={item.url}
src={item.url}
alt={`Slide ${i}`}
/>
))}
</Carousel>
</div>
</div>