Carousel: cannot see images

[c-marc]

Describe the bug
I'm trying the Carousel (copy & paste the minimal example from the doc) and images don't show up...
I see the buttons and the component full width, and the slides getting triggered... But not the images... Those are fetched from url and I tried with local assets too...

React, Vite setup, TailwindCSS and flowbite installed and configured without any deviation... (the rest is working)

To Reproduce
Copy & paste the minimal example from the doc

Expected behavior
See placeholders

Screenshots
If applicable, add screenshots to help explain your problem.

System information:

• Device:
• Resolution:
• OS: iOS
• Browser: Chrome
• Version:

Project information:

• Tailwind: 3.3.2
• Flowbite: 1.6.5
• Flowbite React: 0.4.7
• Type: Vite

[rluders]

@c-marc try to update the flowbite-react. It seems that you are using 0.1.2 we are at 0.4.7.

[c-marc]

Thank you fore your answer @rluders. My bad: I just didn't correctly set the version in the issue. I was up to date. Actually I made an incorrect import of Carousel, from flowbite and not flowbite-react... This was throwing the error. Now it's not but I don't see the images :/ Must be sthg simple I don't get...

[rluders]

Share some code. :)

[rluders]

I'm converting this to discussion, 'cause it isn't a bug.

[c-marc]

Thank you for handling this first post.. I'm not sure whether it's a discussion, a bug or an issue...
As I mentioned I copied the example straight from the doc to be extrasure I wasn't doing sthg shady...

https://www.flowbite-react.com/docs/components/carousel

So for short:

<Carousel>
  <img
    alt="..."
    src="https://flowbite.com/docs/images/carousel/carousel-1.svg"
  />
  <img
    alt="..."
    src="https://flowbite.com/docs/images/carousel/carousel-2.svg"
  />
  <img
    alt="..."
    src="https://flowbite.com/docs/images/carousel/carousel-3.svg"
  />
  <img
    alt="..."
    src="https://flowbite.com/docs/images/carousel/carousel-4.svg"
  />
  <img
    alt="..."
    src="https://flowbite.com/docs/images/carousel/carousel-5.svg"
  />
</Carousel>

Where I'm confused is that:

• following the doc I imported import { Carousel } from 'flowbite';, this throws Cannot set properties of undefined (setting '_items'). That's why I posted the issue as a bug....
• then I thought it was just a typo from the doc and I needed to import from flowbite-react... this doesn't throw... but I see the buttons and some sliding happening (with devtools) of empty containers (no images)... so it's still not working on my side...
  I didn't make some crazy config and followed the installation steps... and it's just the bare example... But maybe I'm missing something obvious...

[rluders]

Well, it's probably not a bug, 'cause the documentation uses the code to renderer the component demo (here). So, if there was something wrong, we would definitely see it happening here. 🤔

I tested it with a standard Vite project and didn't see any issues: https://codesandbox.io/p/sandbox/flowbite-react-playground-p8idip?file=%2Fsrc%2FApp.tsx%3A106%2C33

[c-marc]

Well... I don't see them on codesandbox either... I'm sorry, this must sound crazy... Tried in Chrome, desactivated uBlock, and just tried in Safari...

[c-marc]

Plus Firefox and Brave on a secondary laptop running linux... just to check whether I'm actually crazy or not... I just see the Timeline...

[tulup-conner]

The Codesandbox demo doesn't display the Carousel for me on Brave on Linux - But that was pretty easily remedied by setting a min-height. My inclination would be that this is a Chromium quirk with heights?

[c-marc]

@tulup-conner I very much appreciate your feedback. Would you be kind enough to tell me how you did it ? I tried different ways of forcing heights when I saw something empty was sliding in a "hidden" way, and following your hint I've been trying to set:

• <Carousel className="min-h-...">
• <Carousel className="h-[200px">

but I still fail to see anything... but I'm no expert and I don't understand what's happening... It's pretty weird...

[c-marc]

Ok, so with a bit of luck I found how to solve it. I had to wrap the Carousel inside a div or whatever and apply a height to that parent container...

Friendly notes:

• dimensions for img didn't work ; dimensions for Carousel didn't either
• I'm really not sure it's an expected behavior. I understand it's working for you but as I said, I tried Chrome/Brave/Firefox/Safari, on iOS and linux laptop and couldn't see the carousel even in the codepen... So this might be worth checking with other people maybe.
  (- and I haven't been able to apply "object-cover" yet)

[alvinChristianto]

experiencing the same problem and @c-marc trick make it work. add some height to to parent div