[TypeScript + React]Swiper 라이브러리 사용법 ( + tailwind)

✅ 설치하기

https://www.npmjs.com/package/swiper
Swiper는 npm에서 패키지로 제공하기 때문에 아래 명령어로 설치 가능하다.

$ npm i swiper

💡사용하기

1️⃣ Swiper import 하기

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

Swiper 라이브러리를 사용하기 위해서는 캐러셀의 큰 틀인 Swiper와 슬라이드 요소인 SwiperSlide를 import해주고, 스타일링을 위해 css파일까지 import 해줘야 한다.

2️⃣ 옵션 지정하기

Swiper 라이브러리에서는 다양한 옵션을 제공하고 있고, 자세한 옵션들은 아래 링크에서 확인 가능하다.

https://swiperjs.com/demos

export default function MainCarousel() {
  return (
    <Swiper
      centeredSlides={true} //가운데 정렬
      slidesPerView={1.5} //한 슬라이드에 보여줄 갯수
      spaceBetween={50} //슬라이드간 거리
      loop={true} //슬라이드 반복 여부
      autoplay={{ delay: 5000 }} //자동 슬라이드 시간
      navigation // 이동 화살표
      pagination={{
        clickable: true,
      }} //pager여부
      modules={[Pagination, Navigation, Autoplay]}
    >
    </Swiper>

3️⃣ 스타일링하기

이번 프로젝트에서 스타일링은 tailwind로 진행해서 나는 tailwind를 사용해서 스타일링을 했다.

.swiper-button-prev,
.swiper-button-next {
  @apply py-12 px-28 text-white;
}

.swiper-button-prev::after,
.swiper-button-next::after {
  @apply text-7xl opacity-70;
}

.swiper-pagination-bullet-active {
  @apply bg-mkOrange;
}

@apply를 사용하면 tailwind의 문법으로 css 지정이 가능하다.