Swiper component Initial Rendering Issue: Incorrect Alignment on First Load

[druvkotwani]

Problem Description: The Swiper component does not render correctly on the first load or after navigating from another page, leading to incorrect alignment of elements.

Expected Behavior: The Swiper component should display correctly with all elements properly aligned on the first load.

Actual Behavior: Elements within the Swiper component are not correctly aligned until a hard refresh is performed.

Steps to Reproduce:

Navigate to the page containing the Swiper component. Don't load that page directly.
Notice the incorrect alignment of elements.
Perform a hard refresh to see the correct alignment.

Environment:

Browser: Chrome / Brave
Operating System: Windows 11
Libraries/Frameworks: NextJs ^13.4.4, React ^18.2.0, Swiper ^8.4.5

Workarounds Attempted:
Setting the initialSlide prop to an index of the slide in the middle.
Adjusting the centeredSlides prop to true.

Screenshots or Code Snippets:

Additional Context:

The Swiper component is configured with slidesPerView={1} and pagination={{ clickable: true }}.