Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Can we achieve a crossfade effect between slides when animation="fade"? #1038

Open
3 tasks done
henrybabbage opened this issue Nov 7, 2023 · 1 comment
Open
3 tasks done

Comments

@henrybabbage
Copy link

henrybabbage commented Nov 7, 2023

Bugs and Questions

Prerequisites

  • I've searched open issues to make sure I'm not opening a duplicate issue
  • I have read through the docs before asking a question
  • I am using the latest version of nuka-carousel

Describe Your Environment

  • What version of nuka-carousel are you using? ^6.0.3
  • What version of React are you using? 18.2.0
  • What browser are you using? Firefox

Describe the Problem

Not a bug per se, I would just like to ask how I can achieve a "cross-fade" effect when the animation prop is set to "fade"? Currently, when changing slides with the animation prop set to "fade", we see the current image disappear, a flash of the background behind where the image was, and then the next image appear. Swiper slider has a crossfade prop for example, so that the current image fades out and the next image fades in at the same time. Could this effect be achieved another way with the Nuka Carousel?

Here is a StackBlitz example with Nuka.

Here is an example of what I am trying to achieve (Swiper in this example).

Expected behavior:

animation="fade"

Images fade over the top of one another.

Actual behavior

One image fades out. The background is momentarily visible. Then the next image fades in.

Thank you very much for your time.

@Andrewryanhyde
Copy link

+1

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants