react-material-ui-carousel: Карусель не работает должным образом с гибким дисплеем

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

Я следую тому же учебнику, дело в том, что вам нужно вернуть функцию обратного вызова из карты.

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

Answer 2

Попробуйте обновитьreact-material-ui-carouselони, вероятно, исправили вашу проблему в версии3.4.2 список изменений

Answer 3

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

добавить [] ко второму "product.images"

Answer 4

это какая-то ошибка в последней версии, т.е. @3.4.2. Попробуйте установить предыдущую версию. В моем случае это работало с версией @2.3.1.

вы делаете следующее, а затем попробуйте еще раз

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