[Swiper] Navigation 버튼 커스텀하기

Jinny·2024년 12월 15일

React swiper

문제해결

목록 보기

13/13

Swiper 버튼 커스텀하기

모임 리스트를 슬라이드 형식으로 구현하기 위해 Swiper 라이브러리를 사용했다. 디자이너 분이 주신 와이어프레임을 토대로 Swiper 버튼을 커스텀하기 위해 알아보자.

Swiper 설정

Swiper는 여러 설정 옵션을 지원한다.

<Swiper
  className="relative z-0"
  slidesPerView={1} // 한 번에 보여줄 슬라이드 개수
  spaceBetween={200} // 슬라이드 간격
  pagination={{ type: 'custom' }} // 커스텀 페이지네이션
  navigation={{
    nextEl: '.swiper-button-next', // 다음 버튼
    prevEl: '.swiper-button-prev', // 이전 버튼
  }}
  modules={[Navigation, Pagination]} // 사용 모듈
>

sliedPerView : 한 번에 몇 개의 슬라이드를 보여줄지 설정
spaceBetween : 슬라이드 간격
pagination : 커스텀 페이지네이션 적용
navigation: 네비게이션 버튼 (perEl, nextEl) 연결

Swiper 커스텀 네비게이션 버튼 구현

Swiper에서 제공하는 네비게이션 버튼 외에도 커스텀 버튼을 사용할 수 있다. 우선 커스텀 버튼을 prevEl과 nextEl로 연결을 해줬기 때문에 동일한 클래스 명으로 원하는 아이콘을 넣어서 구성하면 된다.
swiper-button-prev는 이전 버튼의 커스텀 클래스이고, swiper-button-next는 이후 버튼의 커스텀 클래스를 지칭한다.

<div className='relative w-full'>
 <Swiper
        className='relative z-0'
        slidesPerView={1}
        spaceBetween={200}
        pagination={{ type: 'custom' }}
        navigation={{
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev',
        }}
        modules={[Navigation, Pagination]}
      >
        {meetingList?.map(
          ({ id, name, startDate, endDate, bookImage, capacity }) => (
            <SwiperSlide key={id}>
             // 보여줄 데이터
            </SwiperSlide>
          ),
        )}
   <div className='swiper-button-prev'>
  	 <PrevIcon />
	</div>
	<div className='swiper-button-next'>
  	  <NextIcon />
    </div>
  </Swiper>
 </div>

커스텀 네비게이션 버튼 스타일링

먼저 기존에 있는 네비게이션 버튼 화살표가 있기 때문에 ::after 를 통해 기존 화살표를 표시하지 않도록 설정한다.
Swiper 컴포넌트를 감싸는 부모 태그를 만들어 position: relative를 설정하고 커스텀 버튼에도 원하는 위치에 지정한다.

.swiper-button-prev::after,
.swiper-button-next::after {
  display: none;
}
.swiper-button-prev {
  @apply absolute -left-[25px] !important;
}
.swiper-button-next {
  @apply absolute right-12 !important;
}
.swiper-button-prev,
.swiper-button-next {
  @apply w-10 h-10 rounded-full border p-2 bg-white !important;
}

❗ Swiper 네비게이션 버튼이 잘리는 문제

다음 버튼은 제대로 보여주고 있으나 이전 버튼이 잘려서 보이지 않는 문제가 발생했다. 이전 버튼에 z-index 를 설정해도 여전히 이전 버튼이 계속 잘리고 해결이 되지 않았다.

❓ 문제의 원인

개발자 도구를 통해 Swiper 관한 컴포넌트를 확인해보니 overflow:hidden 이 설정되어 있어서 이전 버튼이 계속 안보이는 원인이였다. 그러나 visible로 설정하면 이전 버튼이 잘리지 않고 보였으나, 다음 슬라이드에 있는 다른 데이터까지 보이는 문제가 있어서 다른 해결 방법을 찾기로 했다.

💡 해결방안

이전 버튼의 위치가 Swiper를 포함한 범위보다 넘어가기 때문에 잘리는 현상이 있으므로 이전 버튼의 위치만 수정한다. 부모 태그 위치 속성 relative를 기준으로 원하는 위치에 지정한다.

    <div className='relative w-full'>
      <div className='swiper-button-prev'>
        <PrevIcon />
      </div>
    <Swiper
        slidesPerView={1}
        spaceBetween={200}
        pagination={{ type: 'custom' }}
        navigation={{
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev',
        }}
        modules={[Navigation, Pagination]}
      >
          <SwiperSlide key={id}>
             // 보여줄 데이터
           </SwiperSlide>
	<div className='swiper-button-next'>
  	  <NextIcon />
    </div>
  </Swiper>
</div>

또한 이전 버튼은 z-index:1을 설정하고 기존 클래스명 swiper는 기본값으로 z-index:1 이 설정되어 있기 때문에 z-index:0 으로 설정하여 이전 버튼이 잘 보이게 된다.

.swiper {
  @apply z-0 !important;
}
.swiper-button-prev {
  @apply absolute -left-[25px] z-[1] !important;
}

드디어 이전 버튼이 잘리지 않고 제대로 나오는 것을 확인할 수 있다.

Jinny