React 에서 Swiper.js를 이용하여 캐러셀 Carousel 만들기 TS JS

캐러셀(Carousel) 이란?

캐러셀은 회전목마라는 뜻인데요, 쉽게말해서 슬라이드라고 생각하시면 됩니다.

티빙 홈페이지

티빙, 넷플릭스 같은 곳과 핸드폰 화면에서 많이 쓰입니다.

Swiper.js를 사용하는 이유?

이전까지는 Framer-motion으로 수동으로 캐러셀을 만들었습니다.

애니메이션을 넣는 것도 여간 힘든일이 아니지만, 제일 큰 이유는 Pagination을 구현하기 위함입니다

수동으로 만들 땐 Pagination 기능을 만들 순 있어도, 애니메이션을 구현하는 것은 굉장히 복잡합니다. (적어도 저는 복잡했습니다..)

슬라이드를 한 장 넘길때의 애니메이션을 구현, 두 장 넘길 때의 애니메이션 구현, … 원하는 만큼의 애니메이션을 각각 구현해야 합니다. (저의 지식에서는 이렇게 하는게 최선이라 생각이 되네요..)

Swiper.js 라이브러리를 이용하면, 애니메이션 구현은 자동으로 이루어진다고 생각하시면 됩니다.

Swiper.js를 사용해 봅시다.

Swiper - The Most Modern Mobile Touch Slider

npm i swiper을 실행해 줍니다.

// import Swiper core and required modules
import { Navigation, Pagination, Scrollbar, A11y } from 'swiper';

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

// Import Swiper styles
import 'swiper/css';
import 'swiper/css/navigation';
import 'swiper/css/pagination';
import 'swiper/css/scrollbar';

export default () => {
  return (
    <Swiper
      // install Swiper modules
      modules={[Navigation, Pagination, Scrollbar, A11y]}
			//A11y는 Accessiblility의 줄임말로 접근성입니다.
      spaceBetween={50} //요소간의 간격
      slidesPerView={3} //화면에 보여지는 요소의 갯수
      navigation //왼, 오른쪽 화살표 
      pagination={{ clickable: true }} //Ellipsis 아이콘 생성, 클릭으로 페지내이션.
	     scrollbar={{ draggable: true }} //아래 스크롤 바
      onSwiper={(swiper) => console.log(swiper)} //Swiper가 마운트 될 때 실행
      onSlideChange={() => console.log('slide change')} //슬라이드가 변경될 때 실행
    >
      <SwiperSlide>Slide 1</SwiperSlide>
      <SwiperSlide>Slide 2</SwiperSlide>
      <SwiperSlide>Slide 3</SwiperSlide>
      <SwiperSlide>Slide 4</SwiperSlide>
    </Swiper>
  );
};

Swiper 홈페이지에 나와있는 Swiper 라이브러리의 기본 틀입니다.

위 코드를 복사하고 실행해 보시면 전체적인 느낌을 잡으실 수 있습니다.

CSS도 따로 import하실 수 있어서 바로 사용할 수 있을 정도로 간편한 라이브러리 입니다.

---

Navigation, Pagination CSS를 커스텀하기 위한 준비.

일단 기본으로 제공되는 Navigation, Pagination CSS는 이쁘지 않습니다.

입맛에 맞게 커스텀하기 위해서 기존의 기능을 일딴 빼줍시다. 저는 보기좋게 SwiperSlide를 약간 수정하였습니다.

import React from "react";
// Import Swiper React components
import { Swiper, SwiperSlide } from "swiper/react";

// Import Swiper styles
import "swiper/css";
import {A11y } from "swiper";

function App() {
  return (
      <Swiper
        modules={[Navigation, Pagination, A11y]}
        spaceBetween={20}
        slidesPerView={3}
        onSlideChange={() => console.log("it works")}
        onSwiper={(swiper) => console.log(swiper)}
      >
        {["red", "green", "blue", "gray", "yellow", "black"].map((color, i) => (
          <SwiperSlide key={i}>
            <div
              style={{ backgroundColor: color, padding: 10, height: "30vh" }}
            ></div>
          </SwiperSlide>
        ))}
      </Swiper>
  );
}

export default App;

위 코드에서 왼쪽으로 이동하는 버튼과, 페이지네이션을 위한 버튼을 만들겠습니다.

//다음 장으로 넘기는 버튼 컴포넌트
import { useSwiper } from "swiper/react";

export default function SlideNextButton() {
  const swiper = useSwiper();
  return (
    <button onClick={() => swiper.slideNext()}>Slide to the next slide</button>
  );
}

//이전 장으로 넘기는 버튼 컴포넌트
import { useSwiper } from "swiper/react";

export default function SlidePrevButton() {
  const swiper = useSwiper();

  return (
    <button onClick={() => swiper.slidePrev()}>Slide to the Prev slide</button>
  );
}

//두번째 장으로 넘어가는 페지네이션 버튼
import { useSwiper } from "swiper/react";

export default function TempBtn() {
  const swiper = useSwiper();
  const handleClick = () => {
    swiper.slideTo(2);
  };
  return <button onClick={handleClick}>두번 째 인덱스로 이동합니다.</button>;
}

useSwiper()훅으로 이동이 가능합니다.

useSwiper훅은 useRef와 비슷해 보이는 훅으로 보입니다. 캐러셀 전체 컴포넌트인 Slider의 정보를 가져다 주고, 내부 메서드를 이용하여 페이지 이동이 가능합니다.

import React from "react";
// Import Swiper React components
import { Swiper, SwiperSlide } from "swiper/react";

// Import Swiper styles
import "swiper/css";
import { A11y } from "swiper";
import SlideNextButton from "./components/SlideNextButton";
import TempBtn from "./components/TempBtn";
import SlidePrevButton from "./components/SlidePrevButton copy";

function App() {
  return (
    <Swiper
      modules={[A11y]}
      spaceBetween={20}
      slidesPerView={3}
      onSlideChange={() => console.log("it works")}
      onSwiper={(swiper) => console.log(swiper)}
    >
      {["red", "green", "blue", "gray", "yellow", "black"].map((color, i) => (
        <SwiperSlide key={i}>
          <div
            style={{ backgroundColor: color, padding: 10, height: "30vh" }}
          ></div>
        </SwiperSlide>
      ))}
      <div style={{ marginTop: 10 }}>
        <SlidePrevButton />
        <SlideNextButton></SlideNextButton>
        <TempBtn />
      </div>
    </Swiper>
  );
}

export default App;

최종적으로 위와같은 코드가 완성되었습니다.

버튼을 꾸미기만 하면 커스텀 완성입니다.

---

Swiper.js 라이브러리를 이용하여 간단하게 캐러셀 구현을 해보았습니다.

GitHub - lurgi/2306SwiperPractice