On version 6.42, the carousel display differs between the preview (left) and the live site (right).
In the preview, when transitioning to the next image, the previous image does not disappear completely but fades out, resulting in a smooth visual continuity. However, after exporting, the first image no longer fades.
Is there a solution to fix this?
画面収録 2026-04-03 11.56.07.mov.zip (3.7 MB)
This usually happens because the Preview in Blocs doesn’t always behave exactly the same as the exported site, especially when it comes to animations and transitions.
What you’re describing sounds like a fade transition not being properly applied or being overridden after export. Here are a few things you can check:
1. Transition type in the carousel
Make sure the carousel is explicitly set to fade (not slide). Sometimes the preview keeps a visual effect that isn’t actually configured.
2. CSS/JS optimization on export
If you have options like:
Combine JS
Combine CSS
Minify files
Try exporting without these options enabled to see if the fade behavior returns. Sometimes optimization can interfere with transitions.
3. Multiple carousel instances or conflicts
If there are multiple sliders or custom scripts on the page, they can override the default behavior after export.
4. Animation libraries (Animate.css, etc.)
If you’re using additional animations, they may work in preview but conflict in the live environment.
5. Clear browser cache
After exporting, always do a hard refresh (Cmd + Shift + R) to ensure you’re not seeing cached behavior.
6. Browser and OS differences
I’ve also seen cases where animations behave differently depending on the browser or even the operating system settings.
For example, accessibility options like “Reduce motion” can disable or alter animations.
That said, I’m not a Blocs expert — I’m still a relatively new user — but these are some things I’ve come across that might help point you in the right direction.