Is there any way to make the TransitionCarousel full screen?

[planetaska]

With TransitionCarousel we can set the divClass prop, and the default is 'overflow-hidden relative h-56 rounded-lg sm:h-64 xl:h-80 2xl:h-96'. As you can see it uses a fixed height. But I want to make it full screen.

If I remove the height classes, or use something like h-full or h-screen, then the carousel layout will break during transition. Also the height of each image is not full container height, either. Has anyone succeeded to make the TransitionCarousel or Carousel working in full screen?

From the doc I think we need to change slideClass for each Slide component, but how do we do this?

[shinokada]

Can you use slideClass like this?

<script>
// more lines
let slideClass = 'your-class'
</script>

<Carousel {slideClass} // more props />

[planetaska]

That worked! I tried passing slideClass prop directly but it didn't work the first time, so I thought it won't work.

Now I can set the slide div to full height, but I still need make the image inside it full height, right? From the Slide component source code I don't think I can do that directly.
Does this mean I will have to do it through css selector, something like .slide img in my styles?

Update: setting slideClass to h-full slide, and add .slide img to global css does the trick. Still wondering if this is the desired way to do it.