Reactjs - 2 Swipers share the same index

Question

I want to set 2 swipers to run in the same index. For example, when I navigate swiper 1 to any indices, the swiper number 2 should go to that index, and vice versa. How can I achieve it in React Swiper?

Thanks in advance.

import React, { useEffect, useState } from "react";
import { Controller } from "swiper";
import { Swiper, SwiperSlide } from "swiper/react";
import { EffectFade, Navigation, Pagination, Autoplay } from "swiper";
import "swiper/css";
import "swiper/css/effect-fade";
import "swiper/css/navigation";
import "swiper/css/pagination";

import Image from "next/image";

export function Service() {
  const [firstSwiper, setFirstSwiper] = useState<any>(null);
  const [secondSwiper, setSecondSwiper] = useState<any>(null);
  return (
    <div className="w-full border-b-2 border-b-stone-500">
        <div className="container max-w-7xl mx-auto mt-20 p-8 flex flex-row">
          <Swiper
            spaceBetween={30}
            loop={true}
            centeredSlides={true}
            speed={1000}
            autoplay={{
              delay: 5000,
              disableOnInteraction: false,
            }}
            effect={"fade"}
            //navigation={true}
            // pagination={{
            //   clickable: true,
            // }}
            modules={[Autoplay, EffectFade, Controller]}
            controller={{ control: secondSwiper }}
            className="basis-1/2 p-12 max-w-md"
            style={{
              padding: 12,
            }}
            onSwiper={setSecondSwiper}
          >
            <SwiperSlide>
              <div className="flex flex-row">
                <img
                  className="aspect-square p-1 rounded-full ring-4 ring-gray-300 dark:ring-gray-500"
                  src="/images/Classic3.jpg"
                  alt="slide 3"
                />
                <div>slide 3</div>
              </div>
            </SwiperSlide>
            <SwiperSlide>
              <div className="flex flex-row">
                <div>
                  <img
                    className="aspect-square p-1 rounded-full ring-4 ring-gray-300 dark:ring-gray-500"
                    src="/images/Combination_brows.jpg"
                    alt="slide 4"
                  />
                </div>
                <div>slide 5</div>
              </div>
            </SwiperSlide>
          </Swiper>
          <Swiper
            spaceBetween={50}
            centeredSlides={true}
            loop={true}
            autoplay={{
              delay: 5000,
              disableOnInteraction: false,
            }}
            speed={1000}
            modules={[Autoplay, Controller]}
            controller={{ control: firstSwiper }}
            className="basis-1/2 self-center content-center"
            style={{
              padding: 12,
            }}
            onSwiper={setFirstSwiper}
          >
            <SwiperSlide>
              <div className="flex flex-row">
                <img
                  className="aspect-square p-1 rounded-full ring-4 ring-gray-300 dark:ring-gray-500"
                  src="/images/Classic3.jpg"
                  alt="slide 3"
                />
                <div>slide 3</div>
              </div>
            </SwiperSlide>
            <SwiperSlide>
              <div className="flex flex-row">
                <div>
                  <img
                    className="aspect-square p-1 rounded-full ring-4 ring-gray-300 dark:ring-gray-500"
                    src="/images/Combination_brows.jpg"
                    alt="slide 4"
                  />
                </div>
                <div>slide 5</div>
              </div>
            </SwiperSlide>
          </Swiper>
        </div>
    </div>
  );
}

Edit: This is my current code for controlling 2 swipers. I'm not sure while I get this error

Unhandled Runtime Error TypeError: Cannot read properties of undefined (reading '2')

Thanks.

Answer 1

To achieve this, you can create a state to store the index and let those 2 swipers use that same state. Then apply the Controller of Swiper to control those component.

 import React, { useState } from 'react';
 import { Controller } from 'swiper';
 import { Swiper, SwiperSlide } from 'swiper/react';

 const App = () => {
   // store controlled swiper instance
   const [controlledSwiper, setControlledSwiper] = useState(null);

   return (
     <main>
       {/* Main Swiper -> pass controlled swiper instance */}
       <Swiper modules={[Controller]} controller={{ control: controlledSwiper }} ...>
         {/* ... */}
       </Swiper>

       {/* Controlled Swiper -> store swiper instance */}
       <Swiper modules={[Controller]} onSwiper={setControlledSwiper} ...>
         {/* ... */}
       </Swiper>
     </main>
   )
 }

Please refer to Swiper's docs (part about Controller) for more information.