[Next.js] Swiper 스와이퍼 적용기

회사에서 맡은 사이트 내에 슬라이더 적용이 필요한 부분이 있어서 가장 유명하다고 생각하는 (내 기준) Swiper 라이브러리를 사용해 적용해보는 내용!!!

swiper 설치

npm install swiper

필요한 모듈 및 스타일 가져오기

// swiper
import { Scrollbar, Autoplay, A11y } from "swiper";
import { Swiper, SwiperSlide } from "swiper/react";

import "swiper/css";
import "swiper/css/scrollbar";

• 원하는 슬라이더 형식에 따라 필요한 모듈과 그에 상응하는 스타일들을 우선 import 해준다.

• 굉장히 다양한 슬라이더 예시를 보고 원하는 것을 고르면 된다. (swiper 공식 데모 문서에서 확인 가능)

• 나 같은 경우는 디자이너 분께서 깔끔한 스크롤바 형식만을 원하셔서 위와 같이 간단히 가져왔다.

swiper 적용

<Swiper
	modules={[Scrollbar, Autoplay, A11y]}
	scrollbar={{ draggable: true }}
	autoplay={{
		delay: 3500,
		disableOnInteraction: false,
	}}
	a11y={{
		prevSlideMessage: "이전 슬라이드",
		nextSlideMessage: "다음 슬라이드",
        slideLabelMessage:
        	"총 {{slidesLength}}개의 슬라이더 중 {{index}}번째 슬라이더 입니다.",
	}}
	spaceBetween={50}
    slidesPerView={1}
    className={styles.swiper}
>
    {bannerList.map((banner) => (
    	<SwiperSlide key={banner.id}>
      		// ... code
        </SwiperSlide>
	))}
</Swiper>

• Swiper 태그가 SwiperSlide 태그를 감싸는 형태로 작성해주어야하고, 적용하고 싶은 모듈들은 전부 Swiper 태그 내에 속성으로 작성해주면 된다.

• a11y 모듈은 웹 접근성을 위한 모듈로, 위와 같이 이전/다음 슬라이드에 대한 메시지나 각각의 슬라이드에 라벨을 붙이는 것도 가능하다. ({{slidesLength}} 와 {{index}} 모두 swiper에서 기본으로 제공해주는 값으로 그대로 사용하면 된다.)

• a11y 모듈을 적용하면 위 사진과 같이 html 내에 aria-label이 적용된 모습을 확인할 수 있다.

• 더 다양한 모듈과 옵션들은 swiper api 공식 문서를 보면 확인할 수 있다!