[Swiper.js] Next.js 양방향 제어 슬라이드 만들기

 

 

 

양방향 제어 슬라이드란?

 

 

Swiper의 공식 문서에 따르면 두 스와이퍼가 서로를 제어하는 경우when both Swipers control each other 라고 말하고 있습니다. 즉 첫 번째 배너에서 유저가 슬라이드를 넘기면, 두 번째 배너에서도 슬라이드가 넘어가고, 반대로 두 번째 배너에서 슬라이드를 넘기면 첫 번째 배너도 슬라이드가 넘어가는 경우라고 볼 수 있겠습니다.

제 경우에는 이미지 배너가 두 개인 것은 아니었지만 배너가 넘어갈 때 텍스트도 함께 넘겨주고 싶었고 Swiper에서 슬라이드 할 때 fade 효과를 넣을 수 있다는 것을 알고 있었기 때문에, 편의상 좌측 배너 / 우측 텍스트 영역, 이렇게 두 가지를 배너로 만들기로 마음먹었습니다.

 

대략 이런 느낌

 

그럼 일단 프로젝트에서 Swiper를 다운로드 받아줍니다. 과거에는 Slick Slider를 사용하던 일이 더 많았던 것 같은데, next.js 유지보수할 때 Swiper를 자주 사용했더니 더 익숙해져 버렸네요.

Swiper는 공식 문서가 아주 잘 되어 있는 편이라서 사실은 그쪽을 보시는 편이 빠르게 시작하실 수 있습니다.

 

npm install swiper

 

다운로드를 받으셨으면 Swiper를 사용할 준비가 완벽하게 끝나신 겁니다. 참고로 제가 사용하는 버전은 가장 최신 버전인 11.2.6입니다.

이제 사용할 Swiper를 두 개 만들어 주세요. 양방향 슬라이드를 만들 때는 Swiper module 중 Controller를 추가하셔야 합니다.

 

'use client';

import { useRef, useState } from 'react';
import Link from 'next/link';
import Image from 'next/image';
import { Swiper, SwiperClass, SwiperSlide } from 'swiper/react';
import { Autoplay, Controller } from 'swiper/modules';
import 'swiper/css';
import banner1 from '@/assets/images/main/bnr-main-250325.jpg';

export default function MainBanner() {
  const [imgSwiper, setImgSwiper] = useState<SwiperClass>();
  const [descriptionSwiper, setDescriptionSwiper] = useState<SwiperClass>();
  
  return (
    ...
    <Swiper
      tag="ul"
      autoplay={{
        delay: 5500,
        disableOnInteraction: false,
      }}
      controller={{
        control: descriptionSwiper,
      }}
      loop={true}
      modules={[Autoplay, Controller]}
      onSwiper={setImgSwiper}
    >
      <SwiperSlide tag="li">
        <Link href="/">
          <Image src={banner1} alt="alt 입력" width={} height={} />
        </Link>
      </SwiperSlide>
    </Swiper>
    <Swiper
      tag="ul"
      controller={{
        control: imgSwiper,
      }}
      loop={true}
      modules={[Controller]}
      onSwiper={setDescriptionSwiper}
    >
      <SwiperSlide tag="li">
        <p>
          타이틀을 입력하세요.
        </p>
        <p>
          디스크립션을 입력하세요.
        </p>
      </SwiperSlide>
    </Swiper>
    ...
  );
}

 

제 경우 마크업을 미리 해둔 것이 있어서 tag를 ul와 li로 지정했지만 사용하지 않으시는 분은 삭제해도 무방합니다. 중요한 것은 onSwiper로 각각의 state를 세팅해 준 다음 이어 줄 Swiper를 서로의 controller 속성으로 지정하는 것입니다. 물론 modules도 잊지 않고 기입해 줍니다. 참 쉽죠? 이게 끝입니다.

 

저번 프로젝트에서 Swiper를 적용할 때만 해도 Swiper  Instance를 생성한 후 SwiperCore.use ~ 와 같은 문법을 사용했어야 했는데, 그 새 이렇게 바뀐 것을 보니 느낌이 이상하네요. 1년이 지나고 다시 이 글을 확인하면 오늘 작성한 코드 역시 레거시가 되어버릴지 모르지만 그 또한 개발 역사의 흐름인 것이겠죠. 화이팅입니다.