Pictures don't appear properly when sliding

[maianabertola]

Hello yifaneye!

First, thank you for this very useful carousel! However, I am experiencing a little problem with the image display.

The issue
The first image seems to appear correctly. But as soon as I slide to the next ones, everything seems to shift slowly to the right. As a result, I have two photos appearing on one slide.

Expected behavior
How do I make one photo appear properly per slide?

Specifications

• My photos are all different sizes.
• They are fetched from a database that I created.
• I wrapped the carousel in a wrapper to position it in the center of my page.
• Browser: Chrome
• I'm new to coding! I've read the documentation and tried to find information on StackOverflow and ChatGPT but haven't found anything 😅

Screenshots
I made a loom record of the carrousel

<>
      <div className="pageContainer">
        <div className="titleWrapper">
          <h1>
            {villa.Villa.name} — {villa.Villa.region}
          </h1>
          <div>
            <Link to={-1}>Back</Link>
          </div>
        </div>

        <div className="flexRow">
          <Carousel
            images={images}
            style={{ height: 500, width: 600 }}
            hasMediaButton={false}
            shouldLazyLoad={true}
            objectFit="contain"
          ></Carousel>
        </div>
      </div>
    </>
  );
}

.titleWrapper {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  padding-bottom: 4vh;
  margin-left: 4.5vw;
  margin-right: 4.5vw;
  align-items: flex-end;
}

.titleWrapper > h1 {
  margin: 0;
  padding: 0;
}

I hope this helps. I'm looking forward to your response. Thank you in advance!