How could I reset the position of a child swiper when changing slides in the parent swiper in a nested swiper setup?

[Ibrahimsalman01]

Context

Sandbox environment

I have a multiple horizontal swipers nested within a parent vertical swiper. The parent swiper lives within src/components/HorseCardsContainer.tsx and children are modeled by the component src/components/HorseCard.tsx.

Problem

The horizontal child swipers maintain their position when swiping vertically, instead I'd like for the children to reset back to their first swiper slide after swiping vertically.

Problem demo

1. You should see an image. Swipe to the left (you should an about me white page).
2. Swipe down to the next slide (you should see an image from the next child).
3. Swipe back up to the first child (you should still see the about me white page).

Question

How could I reset the children's swiper slide back to the initial slide after swiping vertically with the parent?

[Poliklot]

@Ibrahimsalman01

I reproduced this with your sandbox's components using Swiper 12.2.0 and React 18.2.0.

You can handle this entirely inside HorseCard: get the parent instance with useSwiper(), keep a ref to the child instance using onSwiper, and reset inactive children after the parent's vertical transition finishes.

Add these imports:

import { useEffect, useRef } from "react";
import { Swiper, SwiperSlide, useSwiper } from "swiper/react";
import type { Swiper as SwiperInstance } from "swiper";

Inside HorseCard, before its return:

// HorseCard is inside the parent's SwiperSlide. This hook runs outside
// the child <Swiper> returned below, so it reads the parent instance.
const parentSwiper = useSwiper();
const childSwiperRef = useRef<SwiperInstance | null>(null);

useEffect(() => {
  const resetInactiveChild = () => {
    const child = childSwiperRef.current;
    if (!child || child.destroyed || parentSwiper.destroyed) return;

    const activeSlide = parentSwiper.slides[parentSwiper.activeIndex];
    if (activeSlide && !activeSlide.contains(child.el)) {
      child.slideTo(0, 0);
    }
  };

  parentSwiper.on("slideChangeTransitionEnd", resetInactiveChild);
  return () => {
    parentSwiper.off("slideChangeTransitionEnd", resetInactiveChild);
  };
}, [parentSwiper]);

Then add this prop to your existing horizontal <Swiper>:

onSwiper={(swiper) => {
  childSwiperRef.current = swiper;
}}

Keep its existing slides and other props unchanged. No changes are needed in HorseCardsContainer.

slideTo(0, 0) selects the first slide without a horizontal animation. Waiting for the parent's slideChangeTransitionEnd avoids visibly resetting the outgoing card mid-transition. The containment check skips the currently active card and resets the others, so their image is already selected when you return. The effect cleanup removes the event listener on unmount.

I checked the original horizontal → vertical → return sequence with mouse drags in Chrome, plus forward/back navigation, zero-duration and rapid parent transitions, and remounting under React StrictMode. The fix does not recreate the child Swiper instances.

This targets your current non-loop, non-cssMode setup. The local reproduction uses Vite for tooling; the Swiper version and card components are from your sandbox.

References: useSwiper, slideTo, slideChangeTransitionEnd.