document.addEventListener("DOMContentLoaded", function () { var swiper = new Swiper(".gallery"

[modest nymph]

i have client router / view transition and the slider stop working when i go to page and when i refresh the page it then work

[normal crystal]

Hi @modest nymph. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

---

This issue is related to how scripts behave with Astro's View Transitions feature. When using the <ClientRouter /> component (formerly known as <ViewTransitions />), some scripts may not re-run after page navigation as they would with full-page browser refreshes.

To solve this problem, you need to modify your script to run at the appropriate time in the navigation cycle. Astro provides lifecycle events that you can use to ensure your script runs correctly with View Transitions.

Here's how you can modify your code to make it work with View Transitions:

<script>
  document.addEventListener('astro:page-load', () => {
    var swiper = new Swiper(".gallery", {
      // Your Swiper configuration here
    });
  });
</script>

By using the astro:page-load event, your Swiper initialization code will run both on the initial page load and after every navigation when using the <ClientRouter /> component.

This solution is based on the information from Script behavior with view transitions and Lifecycle events in the Astro documentation.

Remember to include this script on every page where you want the Swiper gallery to initialize, or in a common layout component that's used across your site.

View Transitions guide provides more detailed information about how to work with scripts and View Transitions in Astro.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: