react-material-ui-carousel：旋转木马无法与 display flex 一起正常工作答案

【问题标题】：react-material-ui-carousel : Carousel not working properly with display flexreact-material-ui-carousel：旋转木马无法与 display flex 一起正常工作
【发布时间】：2023-02-16 04:05:15
【问题描述】：

当我将它的显示设置为 flex 时，轮播没有正确显示图像

<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;
}

Carousel Image Not Displaying Properly

【问题讨论】：

欢迎来到 SO。请解释您想要实现的目标以及原因，尤其是提出一个具体问题。您的第一个 div 最后缺少 ">。另外，我自己不是 CSS 专家，但那些是 CSS 专家的人可能需要相关的 HTML 和 CSS 才能为您提供帮助。
Carousel Image 类的样式定义是什么？

标签： css reactjs carousel react-material-ui-carousel

【解决方案1】：

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

将 [] 添加到第二个“product.images”

【讨论】：

【解决方案2】：

尝试升级 react-material-ui-carousel 他们可能在版本 3.4.2 changelog 中解决了你的问题

【讨论】：

【解决方案3】：

这是最新版本的某种错误，即 @3.4.2 。尝试安装以前的版本。在我的例子中，它适用于版本@2.3.1

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

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

【讨论】：

【解决方案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>

【讨论】：