#Carousal slide not covering full width in modal

3 messages · Page 1 of 1 (latest)

tacit hornet
#

So I am using mantine v6. I have to use a carousal inside a modal. The first slide covers 100% width of the slide but the next slide leaves certain width and it increases after subsequent slides as shown in the video.

Please let me know what can be done.

Thank you

The code:

"use client";
import { Carousel } from "@mantine/carousel";
import { Modal, Button } from "@mantine/core";
import { useDisclosure } from "@mantine/hooks";

const Carousal = () => {
  return (
    <Carousel maw={320} mx="auto" withIndicators height={200}>
      <Carousel.Slide>
        <div className="bg-red-100 text-4xl font-bold text-red-600 h-full flex justify-center items-center">
          1
        </div>
      </Carousel.Slide>
      <Carousel.Slide>
        <div className="bg-green-100 text-4xl font-bold text-green-600  h-full flex justify-center items-center">
          2
        </div>
      </Carousel.Slide>
      <Carousel.Slide>
        <div className="bg-blue-100 text-4xl font-bold text-blue-600  h-full flex justify-center items-center">
          3
        </div>
      </Carousel.Slide>
    </Carousel>
  );
};

const CarousalDocumentation = () => {
  const [opened, { open, close }] = useDisclosure(false);

  return (
    <div>
      <h3>Carousal</h3>
      <article>
        <Carousal />
      </article>

      <h3>Carousal inside modal</h3>

      <Modal opened={opened} onClose={close} title="Carousal">
        <Carousal />
      </Modal>

      <Button onClick={open}>
        Open modal
      </Button>
    </div>
  );
};
export default CarousalDocumentation;
grave yacht
tacit hornet