How do I turn a a Carousel into a circle?

[lusty abyss]

I have joined the discord just to ask this. I am struggling like crazy with it.

This is what my Carousel component looks like currently: ts <Carousel loop plugins={[autoplay.current]} className="hero-slider" styles={ { // slide: { // borderRadius: "20%", // // width: "40vw", // // height: "40vh", // }, // container: { // borderRadius: "50%", // }, // viewport: { // borderRadius: "20%", // }, } } withControls={false} > {heroComponent.imageSlider.map((img, index) => ( <Carousel.Slide key={index + img.title}> <Image className="!rounded-full" src={img.src} alt={img.title} /> </Carousel.Slide> ))} </Carousel> This is not what I want because it turns it into a pill shape not a circle. Also, when it slides to the next image you can clearly see that it's parent is a sharp shaped rectangle.

What I have also tried is this... tsx <Carousel loop plugins={[autoplay.current]} className="hero-slider" styles={{ // slide: { // borderRadius: "20%", // // width: "40vw", // // height: "40vh", // }, // container: { // borderRadius: "50%", // }, viewport: { borderRadius: "50%", width: "40vw", height: "40vh", }, }} withControls={false} > {heroComponent.imageSlider.map((img, index) => ( <Carousel.Slide key={index + img.title}> <Image src={img.src} alt={img.title} /> </Carousel.Slide> ))} </Carousel> I set the width and height on the viewport element to eachother. This does not give me a circle, but an oval shape.

I have also tried tweaking and playing around with the styling in dev tools 😵nothing solves it. Didn't image I'd struggle so much with this.

Also, this is the parent of the Carousel component:tsx <div className="right h-full p-6 col-span-6 flex items-center justify-center"> </div>
I don't see how the parent could have effect on this but maybe it helps helping me.

[lusty abyss]

*installing embla carousel on sandbox is proving to be a headache, so that's why you're not seeing a sanbox url.

*feel free to ping me

[spice stag]

Carousel packge is available on provided sandbox template – https://codesandbox.io/s/mantine-template-9ze89?file=/src/App.tsx

[lusty abyss]

okay

[lusty abyss]

Could not find dependency: 'embla-carousel-autoplay' relative to '/src/App.tsx'

[spice stag]

You can add dependencies in the sidebar

[lusty abyss]

I've tried that

it's proving pretty difficult

I need to put tailwind too i thin

https://codesandbox.io/s/clever-nova-c5y4xm?file=/src/App.tsx

[spice stag]

It does not work

[lusty abyss]

good lord

[lusty abyss]

odd,

Can you help me despite the sanbox not working?