How to separate two swiper instance hooks on the same page? - reactjs

Question

I have two React Swipers on the same page.
I'm using useSwiper to create my own navigation buttons.
It works great for one swiper. But now that I have two instances on the same page, when I click the next on one instance, both of them go to the next item.
In other words, their navigations are tied together.
These swiper instances are inside two separate components.
const Home = () => {
return <div>
<FirstSection /> // This has a `useSwiper` in it
<SecondSection /> // This also has a `useSwiper` in it
</div>
}
How can I make these instances separate from each other?
I have searched the docs and I can't find what to do.

Answer 1

you need to add a controller for each one take a look to the docs https://swiperjs.com/react#controller and check the example below
import React, { useState } from 'react';
import { Controller } from 'swiper';
import { Swiper, SwiperSlide } from 'swiper/react';
const App = () => {
// store swiper instances
const [firstSwiper, setFirstSwiper] = useState(null);
const [secondSwiper, setSecondSwiper] = useState(null);
return (
<main>
<Swiper
modules={[Controller]}
onSwiper={setFirstSwiper}
controller={{ control: secondSwiper }}
>
{/* ... */}
</Swiper>
<Swiper
modules={[Controller]}
onSwiper={setSecondSwiper}
controller={{ control: firstSwiper }}
>
{/* ... */}
</Swiper>
</main>
);
};