[Swiper & React] Swiper로 두개의 슬라이드 동시에 제어하기

만들고 싶은 슬라이드

---

슬라이드를 만들다 보면 각각의 다른 슬라이드를 제어를 하고 싶은 경우가 생기게 됩니다.

1번 슬라이드를 기준으로 1번 슬라이드가 움직이면 2번 슬라이드도 같이 움직이는 슬라이드를 만드는 방법입니다.

 

문제점

---

처음에는 아래의 예제를 참고해서 만들었으나

pagination, autoplay, loop를 적용하면 이상하게 동작하는 현상이 발생

https://codesandbox.io/s/k3cyyc?file=/src/App.jsx 

swiper-react-thumbs-gallery - CodeSandbox

 

해결방안

---

Thumbs를 사용하면 안 되고 Controller를 사용해야 된다.

import React, { useRef, useState } from 'react';
// Import Swiper React components
import { Swiper, SwiperSlide } from 'swiper/react';

// Import Swiper styles
import 'swiper/css';

import './styles.css';

// import required modules
import { Autoplay, Controller } from 'swiper/modules';

export default function App() {
  const [firstSwiper, setFirstSwiper] = useState(null);
  const [secondSwiper, setSecondSwiper] = useState(null);

  return (
    <>
      <Swiper //
        autoplay={{ delay: 2000, disableOnInteraction: false }}
        loop={true}
        modules={[Controller, Pagination, Autoplay]}
        onSwiper={setFirstSwiper}
        controller={{ control: secondSwiper }}
        className="mySwiper"
      >
          <SwiperSlide>Slide 1</SwiperSlide>
          <SwiperSlide>Slide 2</SwiperSlide>
          <SwiperSlide>Slide 3</SwiperSlide>
          <SwiperSlide>Slide 4</SwiperSlide>
      </Swiper>
      <Swiper //
        modules={[Controller]}
        loop={true}
        onSwiper={setSecondSwiper}
        controller={{ control: firstSwiper }}
        className="mySwiper2"
      >
      	  <SwiperSlide>Slide 1</SwiperSlide>
          <SwiperSlide>Slide 2</SwiperSlide>
          <SwiperSlide>Slide 3</SwiperSlide>
          <SwiperSlide>Slide 4</SwiperSlide>
      </Swiper>
    </>
  );
}