[기능] Next.js에서 Swiper로 캐러셀 구현하기

설치 및 세팅

npm i swiper

• globals.css에 스타일 추가

@tailwind base;
@tailwind components;
@tailwind utilities;

/* Swiper 기본 스타일 */
@import 'swiper/css';
@import 'swiper/css/navigation';
@import 'swiper/css/pagination';

Swiper 사용 예시

• modules: 사용할 기능을 배열로 불러옴
  - Navigation: 좌우 화살표 버튼
  - Pagination: 하단 점 네비게이션
  - Autoplay: 자동 재생
• spaceBetween: 슬라이드 간격(px)
• slidesPerView: 한 화면에 보여줄 슬라이드 개수
• navigation: true면 기본 좌우 버튼 제공
• pagination: { clickable: true }로 점 클릭 가능
• autoplay: { delay: 3000 } → 3초마다 자동 전환
  - disableOnInteraction: false → 유저가 스와이프해도 autoplay 유지
  - pauseOnMouseEnter: false → 마우스를 올려놔도 멈추지 않음
• loop: 마지막 슬라이드 이후 첫 번째로 돌아가는 무한 루프
• preventClicks: 드래그(스와이프) 직후 잘못된 클릭 이벤트가 발생하지 않게 방지
• preventClicksPropagation: 클릭 이벤트가 상위로 전파되는 것 차단
• Swiper 기본 화살표 대신, 외부에서 만든 커스텀 버튼을 연결
  - .popular-prev / .popular-next라는 클래스명을 가진 DOM 요소를 찾아서 이전/다음 버튼으로 사용
• breakpoints: 반응형 설정 (화면 너비별 옵션 변경 가능)
• 0 ~ 1199px 구간 (모바일/태블릿)
  - allowTouchMove: true → 터치/드래그로 슬라이드 가능
  - simulateTouch: true → 마우스로도 터치처럼 드래그 가능
  - grabCursor: true → 드래그 가능할 때 손 모양 커서 표시
• 1200px 이상 (데스크톱)
  - allowTouchMove: false → 드래그 불가능 (버튼/오토플레이만 동작)
  - simulateTouch: false → 마우스 드래그 불가능
  - grabCursor: false → 손 모양 커서 제거

"use client";

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

export default function Home() {
  return (
   <Swiper
        className="popular-swiper"
        modules={[Navigation, Autoplay]}
        loop
        autoplay={{
          delay: 3000,
          disableOnInteraction: false,
          pauseOnMouseEnter: false,
        }}
        slidesPerView={3}
        spaceBetween={16}
        preventClicks
        preventClicksPropagation
        navigation={{
          enabled: true,
          prevEl: ".popular-prev",
          nextEl: ".popular-next",
        }}
        breakpoints={{
          // 0 ~ 1199px
          0: {
            allowTouchMove: true,
            simulateTouch: true,
            grabCursor: true,
          },
          // 1200px 이상
          1200: {
            allowTouchMove: false,
            simulateTouch: false,
            grabCursor: false,
          },
        }}
      >
        {popularMockData.map((item, idx) => (
          <SwiperSlide key={idx}>
            <PopularCard {...item} />
          </SwiperSlide>
        ))}
      </Swiper>
  );
}