Carousel component stops working when navigating back to page in Astro with View Transitions

[JoyBoy-369]

Describe the bug I am using the carousel component in my Astro project with View transition and all works fine on the first page load. When I navigate to another page and back to this page, the carousel does not work. I see the messages fired by OnChange event , as I put it on cycle. However, on looking at the HTML the elements remain hidden and I see no change.

To Reproduce Steps to reproduce the behavior:

1. Use the carousel component in any page
2. Navigate to another page and back
3. The carousel component is not shown

Expected behavior The carousel component should work the same as on the first page load as on subsequent page loads

Screenshots First page load

Navigating to another page and back

Desktop (please complete the following information):

• OS: Mac
• Browser : Arc
• Version : Chromium Engine Version 124.0.6367.61

Additional context

[adoallo]

I'm having the same problem. Did you manage to solve it?

[DiabeticOwl]

Are you using ViewTransitions from Astro? In my project it seems to be breaking the JS behind the Carousel component.

When I remove the <ViewTransitions /> tag the component works as expected.

Flowbite team, is there any work around to establish compatibility between ViewTransitions and the Carousel component?

[JoyBoy-369]

@adoallo @DiabeticOwl I was able to do it using the flowbite react carousel component. The basic gist of what is happening is that there has to be a way to unmount/ destroy the carousel instance on navigating away and remount it when navigating back. However, the js version doesn't seem to have such a way. It can obviously be extended by adding the code yourself. However, due to time constraint I used the react carousel component. It's basically the same way you would add any astro island. I would suggest to build the carousel yourself or find a library that actually exposes an API to create and destroy the carousel. You can then destroy it on say a page swap and create it on page load astro events. Hope this helps!

[DiabeticOwl]

Greetings @JoyBoy-369, yes. I have concluded on taking the same approach of implementing the react component as an island. I used the ui.shadcn component.

Wanted to expressed what I noticed with the ViewTransitions tag to raise the flag. Thank you for your feedback.

[JonathanAriass]

Hey guys I just found this issue opened and I found this on Astro Docs.

An event that fires at the end of page navigation, after the new page is visible to the user and blocking styles and scripts are loaded. You can listen to this event on the document. The <ViewTransitions /> component fires this event both on initial page navigation for a pre-rendered page and on any subsequent navigation, either forwards or backwards.

Maybe using <ViewTransitions /> the js is not load properly and needs to be reload.

P.S.: I don't know if reloading the js on every transition is the best option but as Astro Docs suggests this is the "solution".

Hope this brings a bit of light into the issue :)

[jramma]

I resolved this issue using Flowbite as follows:

<script
  is:inline
  src="https://cdn.jsdelivr.net/npm/[email protected]/dist/flowbite.min.js"
></script>

<!-- Persisting the carousel between animations -->
<script>
  import { initFlowbite } from "flowbite";
  document.addEventListener("astro:after-swap", () => {
    initFlowbite();
  });
</script>

Additionally, instead of reloading all Flowbite components after every swap, you can reload only the specific components you need, as explained in the Flowbite documentation: https://flowbite.com/docs/getting-started/astro/

[abtrumpet]

I resolved this issue using Flowbite as follows:

<script
  is:inline
  src="https://cdn.jsdelivr.net/npm/[email protected]/dist/flowbite.min.js"
></script>

<!-- Persisting the carousel between animations -->
<script>
  import { initFlowbite } from "flowbite";
  document.addEventListener("astro:after-swap", () => {
    initFlowbite();
  });
</script>

Additionally, instead of reloading all Flowbite components after every swap, you can reload only the specific components you need, as explained in the Flowbite documentation: https://flowbite.com/docs/getting-started/astro/

I can confirm this solved the problem for me. Thank you.