[TIL] 2022/01/14 Fri - swiper.js 로 간단한 가로 슬라이드 만들기

 

 

 

 

Today I Learned

 

 

📌 swiper.js로 간단한 가로 슬라이드 만들기

 

내가 작업하고 있는 사전 통계 탭에 단어 등록을 많이 한 유저 랭킹이 들어가는데,

세 명까지만 나와서 세로로 늘어놓는 것 보다는 가로로 순서대로 보이는 게 모바일 환경에서 더 좋을 것 같았다.

 

onMouse 이벤트로 이렇게 저렇게 해보다가

시간이 없어서 결국 또 라이브러리를 사용하기로 했다.

 

swiper.js는 이미 다른 페이지에서도 많이 사용되고 있어서 설치할 필요는 없었고,

필요한 것만 컴포넌트에 import 해서 사용하면 됐는데

나는 페이지네이션도, 내비게이션도 필요하지 않고 간단한 가로 슬라이드만 구현할 거라서

Swiper와 SwiperSlide만 import해서 사용했다.

 

 

 

/* DictStat.js */

/* 라이브러리 import */

import { Swiper, SwiperSlide } from 'swiper/react'
import 'swiper/swiper.min.css'

/* 컴포넌트에서 슬라이드할 부분 */

const DictStat = (props) => {
  return (
  /* 생략 */
    <StyledSwiper slidesPerView={2.16} spaceBetween={16} freeMode={true} lazy={true}>
      {rankList &&
        rankList.map((rank, index) => {
          return (
            <SwiperSlide key={`rank-${index}`}>
              <OneRankCard rank={rank} index={index} />
            </SwiperSlide>
          )
        })}
    </StyledSwiper>
    /* 생략 */
  )
}

/* styled-component로 Swiper 커스텀 */

const StyledSwiper = styled(Swiper)`
  width: 100%;
  height: fit-content;
  padding: 16px;
  background-color: #eee !important;
  border-radius: 10px;
  cursor: grabbing;
  &::-webkit-scrollbar {
    display: none;
  }
  .swiper-slide {
    width: fit-content !important;
    background-color: transparent !important;
  }
`
export default DictStat

 

Swiper 와 SwiperSlide는 라이브러리에서 기본적으로 설정하는 className과 속성들이 있는데,

다른 컴포넌트에서도 사용할 경우 눈에 보이지 않는 기본 className이 같아서 충돌이 일어나기도 한다.

 

그래서 웬만해선 className을 별도로 지정하거나

적용하려는 css 속성에 내가 작성한 것이 우선적으로 참조될 수 있도록 ! important 를 함께 작성해주는 것이 좋다.

 

swiper 라이브러리는 처음 사용해봤는데,

찾아보니 페이지네이션이나 내비게이션을 활용해서 주로 배너 슬라이드나 캐러셀 이미지에 많이 사용되는 것 같다.

 

공식 홈페이지에서 찾아보니 제공하는 API가 너무 많아서 오히려 혼란스러웠는데

왠지 앞으로도 자주 사용할 것 같아서 필요할 때마다 구글링하기 보다는 공식 홈페이지에서 찾아서 해결하는 연습을 해야겠다!