React - 리액트 swiper 사용해서 캐러셀 구현하기

React Swiper Docs

Swiper React Components

언제나 그렇듯 공식문서 보는 게 최고

화면 상단의 Demos 탭에 들어가면 Swiper 옵션들을 사용해서 만들 수 있는 다양한 예시들이 잘 정리되어 있다. 

설치

npm i swiper

기본 사용법

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

export default App() => {
  return (
    <Swiper
      spaceBetween={50}
      slidesPerView={3}
      onSlideChange={() => console.log('slide change')}
      onSwiper={(swiper) => console.log(swiper)}
    >
      <SwiperSlide>Slide 1</SwiperSlide>
      <SwiperSlide>Slide 2</SwiperSlide>
      <SwiperSlide>Slide 3</SwiperSlide>
      <SwiperSlide>Slide 4</SwiperSlide>
      ...
    </Swiper>
  );
};

 네비게이션, 스크롤바, 페이지네이션 등을 사용할 경우

// 스와이퍼 내 모듈 import 
import { Navigation, Pagination, Scrollbar, A11y } from 'swiper';
import { Swiper, SwiperSlide } from 'swiper/react';
import 'swiper/css';
import 'swiper/css/navigation';
import 'swiper/css/pagination';
import 'swiper/css/scrollbar';

export default App() => {
  return (
    <Swiper
      // 모듈 사용 시 해당 사항 입력 필수!
      modules={[Navigation, Pagination, Scrollbar, A11y]}
      spaceBetween={50}
      slidesPerView={3}
      navigation
      pagination={{ clickable: true }}
      scrollbar={{ draggable: true }}
      onSwiper={(swiper) => console.log(swiper)}
      onSlideChange={() => console.log('slide change')}
    >
      <SwiperSlide>Slide 1</SwiperSlide>
      <SwiperSlide>Slide 2</SwiperSlide>
      <SwiperSlide>Slide 3</SwiperSlide>
      <SwiperSlide>Slide 4</SwiperSlide>
      ...
    </Swiper>
  );
};

내 코드 Swiper 부분

import { Swiper, SwiperSlide } from "swiper/react";
import { FreeMode } from "swiper";
import "swiper/css";
import "swiper/css/free-mode";

...

function ListItem(...) {
  return (
		...
        <Swiper
          modules={[FreeMode]}
          spaceBetween={10}
          slidesPerView={3}
          loop={true}
          freeMode={true}
        >
          {courseList.map(course => (
            <SwiperSlide key={course}>{course}</SwiperSlide>
          ))}
        </Swiper>
      ...
  );
}

FreeMode 모듈을 사용해 주었고, 한 페이지에 표시되는 Slide 개수는 3개로 지정했다.

Infinite Scroll을 위해 loop 옵션은 true로 설정!

Swiper 내에 들어가는 Slide들은 courseList라는 배열의 요소를 map으로 펼쳐주었다. 

결과물

 

 

예전에 Vue로 개발할 때 캐러셀 부분 구현에 애를 많이 먹었어서 걱정했는데 생각보다 금방 끝나서 다행이다!

이래서 리액트 쓰는건가 하는 생각이 잠깐 스쳐지나감ㅎ..

아무튼 끗!