1

The carousel is not showing the images properly when I set it's display to 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 Code

.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

Aman Makhija
  • 11
  • 5
  • Welcome to SO. Please explain what you want to achieve and why and especially do ask a concrete question. Your very first `div` is lacking `">` at the end. Also, I'm not a CSS expert myself, but those who are will probably need the surrounding HTML and CSS in order to be able to help you. – ahuemmer Aug 09 '22 at 09:07
  • what are the style defination for CarouselImage class? – Harsh Gupta Aug 16 '22 at 19:13

4 Answers4

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

add [] to the second "product.images"

Mburu Njoroge
  • 1
0

Try upgrading react-material-ui-carousel they probably fixed your issue in version 3.4.2 changelog

alextrastero
  • 3,703
  • 2
  • 21
  • 31
0

it's some kind of bug with the latest version i.e. @3.4.2 . Try installing a previous version . In my case it worked with version @2.3.1

you do the following and then try again

npm uninstall react-material-ui-carousel
npm install react-material-ui-carousel@2.3.1
Piyush Yadav
  • 71
  • 1
  • 2
0

I am following same tutorial, the thing is that you need to return the from the callback function in 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>
Nikunj Khakhkhar
  • 1