[x] I've searched open issues to make sure I'm not opening a duplicate issue
[x] I have read through the docs before asking a question
[x] 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?
Andrewryanhyde
commented
6 months ago
Bugs and Questions
Prerequisites
Describe Your Environment
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.