css reactjs 料-UI-转盘：Carousel无法与显示器Flex一起正常工作

omvjsjqw 于 2023-02-17 发布在 React

关注(0)|答案(4)|浏览(148)

当我将转盘的显示设置为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

css

来源：https://stackoverflow.com/questions/73259721/react-material-ui-carousel-carousel-not-working-properly-with-display-flex

4条答案

按热度按时间

lf3rwulv1#

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

将[]添加到第二个“产品.图像”

赞(0）回复(0）举报 2023-02-17

huus2vyu2#

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

赞(0）回复(0）举报 2023-02-17

l7wslrjt3#

这是最新版本（即@3.4.2）的某种错误。请尝试安装以前的版本。在我的情况下，它可以与版本@2.3.1一起工作
请执行以下操作，然后重试

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

赞(0）回复(0）举报 2023-02-17

p3rjfoxz4#

我遵循相同的教程，事情是，你需要返回从回调函数在Map。

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

赞(0）回复(0）举报 2023-02-17

我来回答

css reactjs 料-UI-转盘：Carousel无法与显示器Flex一起正常工作

4条答案

相关问题

热门标签

最新问答