Next.js Swiper 캐러셀 이미지 슬라이더 구현하기

moreas·2023년 9월 16일

Next.js

목록 보기

1/2

Next.js Carousel구현하기

next.js + typeScript + tailwind 내가 제일 좋아하는 조합으로 포트폴리오 페이지를 쉬엄 쉬엄 만들어 가고 있다.
포트폴리오 사이트를 직접 구현하면서 내가 만든 프로젝트의 사진을 이미지 슬라이더에 캐러셀 형태로 구현해보고자 했다.
팀프로젝트 때 다른 팀원분이 맡은 기능 중 스와이퍼를 사용하여 슬라이더를 구현한 걸 본 적이 있는데 제대로 기능을 알지 못해서 이 기회에 사용해보기로 했다.

🍀 Carousel이란?

캐러셀은 슬라이드쇼와 같은 방식으로 콘텐츠를 표시하는 UX 구성 요소이다. 쉽게 말해 콘텐츠를 슬라이드 형태로 볼 수 있는 것이다. 캐러셀은 '자동 재생'하거나 사용자가 수동으로 탐색할 수 있다. 캐러셀은 다른 곳에서도 사용할 수 있지만 홈페이지에 이미지, 제품 및 프로모션을 표시하는 데 가장 자주 사용된다.

🧸 Swiper 사용하여 Carousel 구현하기

공식 홈페이지에 사용법과 컴포넌트화된 예시가 굉장히 잘 나와있어 참고하기 좋다.

1. 설치 하기

$ npm install swiper

나는 tailwind를 사용하고 있으므로 글로벌 css에 최소한의 스타일을 적용해주었다.

.swiper {
  width: 100%;
  height: 100%;
}

.swiper-slide {
  text-align: center;
  font-size: 18px;
  background: #fff;

  /* Center slide text vertically */
  display: flex;
  justify-content: center;
  align-items: center;
}

.swiper-slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

2. 컴포넌트에 사용

최신 버전을 사용하는 도중에 내비게이션과 스크롤바의 타입 에러가 사라지지 않는 문제를 발견했다. 스와이퍼 현재 최신버전은 10 버전 인데 6으로 다운 그레이드하여 문제를 해결하였다.
그러면서 스와이퍼 관련 임포트나 프로퍼티 설정이 약간 변경된 사항이 있어 같이 변경을 해주었다.
따로 비동기 통신할 데이터는 없고 내부에 정적 파일로 저장된 이미지를 불러올 것이기 때문에 mock api 를 사용하는 것과 유사한 방법으로 구현하여 불러온다.

import SwiperCore, { Navigation, Scrollbar } from "swiper";
import { Swiper, SwiperSlide } from "swiper/react";

import "swiper/swiper-bundle.min.css"; // Swiper v6 이상의 경우

export default function MainSlider() {
  SwiperCore.use([Navigation, Scrollbar]);
  const swiperRef = useRef<SwiperCore>();
  const breakpoints = {
    768: {
      slidesPerView: 1,
      slidesPerGroup: 1,
    },
    1024: {
      slidesPerView: 1,
      slidesPerGroup: 1,
    },
    1200: {
      slidesPerView: 1,
      slidesPerGroup: 1,
    },
  };

slidesPerView : 한 화면에 슬라이드를 몇 개씩 보여줄 것인지 설정해준다.

 return (
    <Swiper
      onSwiper={(swiper) => {
        swiperRef.current = swiper;
      }}
      // pagination={{ clickable: true }}
      navigation
      breakpoints={breakpoints}
      className="w-80 h-64"
    >
      {images?.map((image: ImageType) => (
        <SwiperSlide key={image.id}>
          <Image
            src={image.imgUrl}
            alt={image.title}
            width={400}
            height={300}
            priority
          />
        </SwiperSlide>
      ))}
    </Swiper>
  );
}