I am trying to make a bootstrap carousel in a react project and the carousel keeps jumping between images. I believe the reason for this is because the images are big, and I am just resizing them to have them fit nicely in the carousel. It only happens once which is I believe it is due to the resizing since they would have been resized once it loads the first time. I have also tried commenting out the resizing and see how the images load and while they are giant, they do smoothly transition between each other.

I have tried using the bootstrap class "img-fluid". And have also tried writing my own CSS to resize it how I want. Neither have worked for me though.

React code:

<Carousel className={classes.carousel}>
  <Carousel.Item>
    <img
      src={image1}
      alt="image1"
      className="img-fluid"
    />
  </Carousel.Item>
  <Carousel.Item>
    <img
      src={image2}
      alt="image2"
      className="img-fluid"
    />
  </Carousel.Item>
  <Carousel.Item>
    <img
      src={iamge3}
      alt="image3"
      className="img-fluid"
    />
  </Carousel.Item>
</Carousel>

CSS code:

.carousel {
  max-width: 60%;
  height: auto;
  margin: 0 auto;
}

.carousel img {
  max-width: 100%;
  height: auto;
  border-radius: 6%;
}

If anyone has any ideas for a workaround this or if this is not actually what's happening I would appreciate that.