totalPages does not work with image inside a div

[danilofuchs]

Is there an existing issue for this?

• [X] I have searched the existing issues

Code of Conduct

• [X] I agree to follow this project's Code of Conduct

Code Sandbox link

Bug report

If image is inside a div, totalPages is always 1, breaking the carousel.

My use case is adding an absolute legend on top of the image, with a title, links, etc.

[carbonrobot]

In your sandbox, the slides are divs that grow and expand to fit their content. Since the image does not have an explicit size set, they shrink to fit the parent container.

There are a couple ways you could do this.

1. Use flex shrink (tailwind's shrink-0 property and optionally setting an explicit width for your image (which is a best practice both for HTML to prevent layout shifting, and for Next/Image so it can render the appropriate size image)

function CarouselImage() {
  return (
    <div className="shrink-0">
      <Image src={image} alt="rick" width={400} />
      <div className="">Subtitle</div>
    </div>
  );
}

2. Or setting the min width for the div, which tells flex box not to shrink it past that size

function CarouselImage() {
  return (
    <div className="min-w-[400px]">
      <Image src={image} alt="rick" />
      <div className="">Subtitle</div>
    </div>
  );
}