[react] react swiper에서 navigation 커스텀하기

import React, { useState } from 'react';
import * as S from './Section.styles';
import { Swiper, SwiperClass, SwiperSlide } from 'swiper/react';
import { A11y, Navigation } from 'swiper/modules';

const Slider = () => {
  const [swiper, setSwiper] = useState<SwiperClass | null>(null);
  const [isBeginning, setIsBeginning] = useState<boolean>(true);
  const [isEnd, setIsEnd] = useState<boolean>(false);

  const handlePrev = () => {
    swiper?.slidePrev();
  };

  const handleNext = () => {
    swiper?.slideNext();
  };

  return (
    <S.StyledSection>
      <S.SlideContainer>
        <Swiper
          slidesPerView={2}
          spaceBetween={28}
          onSlideChange={(e) => {
            setIsBeginning(e.isBeginning);
            setIsEnd(e.isEnd);
          }}
          onSwiper={(e) => {
            setSwiper(e);
          }}
          modules={[Navigation, A11y]}
        >
          <SwiperSlide>Slide 01</SwiperSlide>
          <SwiperSlide>Slide 02</SwiperSlide>
          <SwiperSlide>Slide 03</SwiperSlide>
          <SwiperSlide>Slide 04</SwiperSlide>
        </Swiper>
        <S.PrevButton
          type="button"
          onClick={handlePrev}
          disabled={isBeginning}
          className="button-prev"
        >
          <S.Icon />
          <p>PREV</p>
        </S.PrevButton>
        <S.NextButton
          type="button"
          onClick={handleNext}
          disabled={isEnd}
          className="button-next"
        >
          <S.Icon />
          <p>Next</p>
        </S.NextButton>
      </S.SlideContainer>
    </S.StyledSection>
  );
};

export default Slider;

 

리액트에서 swiper 라이브러리를 사용할 때, 기본 제공되는 navigation 말고 별도의 디자인을 적용해서 만들었다.

 

1. navigation 버튼 생성

<S.PrevButton
  type="button"
  onClick={handlePrev}
  disabled={isBeginning}
  className="button-prev"
>
  <S.Icon />
  <p>PREV</p>
</S.PrevButton>
<S.NextButton
  type="button"
  onClick={handleNext}
  disabled={isEnd}
  className="button-next"
>
  <S.Icon />
  <p>Next</p>
</S.NextButton>

 

나는 styled-components로 navigation 버튼을 각각 만들었다.

참고로 navigation 버튼 마크업의 위치는 반드시 Swiper와 같은 레벨에 있어야 한다.

 

2. Swiper 메서드를 사용하여 슬라이드 이동시키기

const Slider = () => {
  // 1. swiper 상태 업데이트
  const [swiper, setSwiper] = useState<SwiperClass | null>(null);
  // 2. 시작 슬라이더 상태 업데이트
  const [isStart, setIsStart] = useState<boolean>(true);
  // 3. 마지막 슬라이더 상태 업데이트
  const [isEnd, setIsEnd] = useState<boolean>(false);

  const handlePrev = () => {
    swiper?.slidePrev();
  };

  const handleNext = () => {
    swiper?.slideNext();
  };

  return (
    <S.StyledSection>
      <S.SlideContainer>
        <Swiper
          ....
          onSlideChange={(e) => {
            setIsStart(e.isStart);
            setIsEnd(e.isEnd);
          }}
          onSwiper={(e) => {
            setSwiper(e);
          }}
          ....
        >
          <SwiperSlide>Slide 01</SwiperSlide>
          ....
        </Swiper>
        <S.PrevButton
          ...>
        </S.PrevButton>
        <S.NextButton
          ...>
        </S.NextButton>
      </S.SlideContainer>
    </S.StyledSection>
  );
};

export default Slider;

 

SwiperClass는 Swiper 라이브러리에서 제공하는 타입이다. Swiper 객체의 모든 속성과 메서드를 포함하는 인터페이스로, 

SlideTo, SlideNext, SlidePrev같은 슬라이드 제어 메서드나 activeIndex등의 속성이 포함되어 있다.

초기에 Swiper 인스턴스가 생성되기 전에는, 상태를 null로 시작하고

Swiper 컴포넌트가 마운트되고 초기화될 때 onSwiper 콜백을 통해서 실제 Swiper 인스턴스를 상태에 저장한다.

이후에 Swiper의 메서드인 slideNext, slidePrev를 호출할 수 있도록 한다.

그리고 버튼을 각각 disabled 처리할 수 있도록 isBeginning, isEnd 상태를 사용한다.

슬라이드 이동 메서드는 각 버튼 클릭 시 해당 함수에서 호출될 수 있도록 한다.