Carousel) Swiper(스와이퍼)- 반응형 슬라이드(캐러셀) 라이브러리

 

 

Swiper(스와이퍼)는 반응형 슬라이드(캐러셀) 라이브러리로, 이미지 슬라이더나 배너 캐러셀 등을 만들 때 많이 사용.
React 프로젝트 기준.

---

✅ 1단계: Swiper 설치

npm install swiper

---

✅ 2단계: 스타일 불러오기

globals.css 또는 layout.tsx에서 전역 스타일에 추가.

// 예: app/globals.css
@import 'swiper/css';
@import 'swiper/css/navigation';
@import 'swiper/css/pagination';

---

✅ 3단계: 사용 예시 (React 컴포넌트)

"use client"; // Next.js App Router 사용 시 필수

import { Swiper, SwiperSlide } from "swiper/react";
import { Navigation, Pagination, Autoplay } from "swiper/modules";

import "swiper/css";
import "swiper/css/navigation";
import "swiper/css/pagination";

const BannerCarousel = () => {
  return (
    <Swiper
      modules={[Navigation, Pagination, Autoplay]}
      spaceBetween={30}  // 슬라이드 간 간격 (px)
      slidesPerView={1} // 한 화면에 보일 슬라이드 수
      navigation  // 자동 재생 설정
      pagination={{ clickable: true }}   // 페이지 점 표시 설정
      autoplay={{ delay: 3000, disableOnInteraction: false }}  // 자동 재생 설정
      loop  // 슬라이드 반복 여부
      className="w-full h-64" // Tailwind로 크기 조절
    >
      <SwiperSlide>
        <img src="/images/banner1.jpg" alt="배너1" className="w-full h-full object-cover rounded-lg" />
      </SwiperSlide>
      <SwiperSlide>
        <img src="/images/banner2.jpg" alt="배너2" className="w-full h-full object-cover rounded-lg" />
      </SwiperSlide>
      <SwiperSlide>
        <img src="/images/banner3.jpg" alt="배너3" className="w-full h-full object-cover rounded-lg" />
      </SwiperSlide>
    </Swiper>
  );
};

export default BannerCarousel;

---

✅ 4단계: 옵션 설명

옵션 설명

slidesPerView	한 화면에 보일 슬라이드 수
spaceBetween	슬라이드 간 간격 (px)
loop	슬라이드 반복 여부
autoplay	자동 재생 설정
navigation	이전/다음 버튼 표시
pagination	페이지 점 표시 설정

---

✅ 5단계: CSS 커스터마이징 (선택)

/* Swiper navigation 버튼 크기 조절 예시 */
.swiper-button-next,
.swiper-button-prev {
  color: #333;
  scale: 1.2;
}

---

 

 

 

 

 

 

 

 

 

참고

쳇지피티