React-responsive-carousel: Issue rendering a carousel without images

[ledbetterljoshua]

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.

[tylerjlawson]

Can you please explain how exactly you did the workaround? I just ran into this issue as well.

[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.

[tylerjlawson]

Yeah I just removed the part about that error from this issue. The console error was unrelated.

[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 ?

[tylerjlawson]

This issue can be seen along with an annoying console warning in the gif below. Trying to make this issue abundantly clear in hopes that it will get addressed.

Notice the white flash between slides.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.