Issue rendering a carousel without images

I’ve found a weird bug where the carousel position breaks while swiping on mobile, if there are no images. This issue can be seen in the “basic - no images” storybook example. The css translate3D position percent is way higher than it should be.

A work around I found is to include a small hidden image within the carousel items.

I did a small amount of debugging, and I noticed that the initialized and hasMount state never gets set to true. If these are manually set to true in the constructor, the issue goes away.

[Am1tgupt4]

Hi Tyler, Josuha I found this weird behaviour as well, In my case I have 3 images and when page first loads and I try to swipe it by touch slide, I see white background and in this case I found that transition3D is set way higher for slider class node and thus image is out of viewport.It makes it a crappy user experience, Did you find a work around for this ?

[ledbetterljoshua]

@tylerjlawson I added an image tag to the content of my carousel items. I believe any image will work as long as it resolves. Then I used CSS to hide the image from view.

<Carousel>
   <div>
    ...content
    <img className="hidden" src="/img/favicon.jpg" />
  </div>
</Carousel>

Also just FYI, you may have a different issue, as I do not see any errors in the console.