[JS Library] Swiper 사용하기

Swiper?

슬라이드 쇼나 이미지 캐러셀과 같은 기능을 제공하는 라이브러리이다.

https://swiperjs.com/

Swiper - The Most Modern Mobile Touch Slider

 

Next.JS 환경에서 사용하기

CDN으로 사용할 수도 있지만, 나는 yarn을 사용하고 있어서 아래와 같이 설치해 줬다.

// yarn
yarn add Swiper

// npm
npm i Swiper

 

https://swiperjs.com/react

Swiper - The Most Modern Mobile Touch Slider

위의 문서에도 잘 나와있지만, Demos에서 원하는 요소들을 가져다가 사용했다.

 

Swiper 요소 색상 변경하기

공식문서를 확인해도 정확하게 어떻게 CSS를 변경해야 하는지 모르겠어서 열심히 검색해 봤다.

 

우선 App.css나 global.css와 같이 최상단 css 파일에 작성해줘야 한다.

다른 css 파일에 작성하고 import해도 안 불러와졌다...

 

찾아보니 아래와 같이 작성하면 된다고 한다.

근. 데.

실행시켜도 적용이 안 되는 것이다...

.swiper-button-next, .swiper-button-prev {
  color: red; /* 버튼 색상 변경 */
  font-size: 20px; /* 버튼 크기 변경 */
}

 

Swiper 공식문서도 다시 보고 다른 분의 블로그 글을 보니 위와 같이 작성하면 안 된다고 한다.

.swiper-button-next,
.swiper-button-prev {
  --swiper-theme-color: transparent;
  --swiper-navigation-size: 100%;
  --swiper-navigation-top-offset: 100%;
}

 

크롬 개발자도구로 뜯어보면 위와 같이 작성해야 한다.

색과 크기 등 요소의 css는 변경 성공!!

 

Swiper Autoplay 적용하기

Autoplay를 적용하기 위해 아래 코드를 작성해 줬다.

<Swiper
    autoplay={{ delay: 3000, disableOnInteraction: false }}
    spaceBetween={50}
    slidesPerView={1}
    onSlideChange={() => console.log("slide change")}
    onSwiper={(swiper) => console.log(swiper)}
    pagination={{
      dynamicBullets: true,
    }}
    navigation={true}
    modules={[Pagination, Navigation]}
    className="mySwiper"
></Swiper>

아무리 새로고침을 해줘도 자동으로 넘어가질 않았다...

스택오버플로우에서 찾아보니 modules에서 Autoplay를 받아오지 않고 있었다.

해결해 주니 성공!

<Swiper
    loop={true} // 이미지 루프
    speed={300}
    autoHeight={true}
    autoplay={{ delay: 3000, disableOnInteraction: false }}
    spaceBetween={50}
    slidesPerView={1}
    onSlideChange={() => console.log("slide change")}
    onSwiper={(swiper) => console.log(swiper)}
    pagination={{
      dynamicBullets: true,
    }}
    navigation={true}
    modules={[Pagination, Navigation, Autoplay]}
    className="mySwiper"
></Swiper>

 

 

다 해결하고 공식문서에서 이걸 발견해 버렸다...

https://swiperjs.com/demos#autoplay

Swiper Demos

진작 코드로 뜯어봤으면 해결했을 텐데...

오늘도 공식문서의 중요성을 배워갑니다...

 

 

참고링크

https://dawonny.tistory.com/358