[React] Swiper로 배너 만들기

메인 페이지에 배너를 구현하려고 했지만, 처음에는 정적인 이미지나 콘텐츠만 표시되는 상태였다.
슬라이드 배너를 직접 구현하려면 다음과 같은 기능들을 추가해야 한다.

• 터치 및 드래그 이벤트 처리
• 자동 슬라이드 기능
• 페이지네이션 표시
• 무한 반복 슬라이드
• 브라우저 호환성 대응

이러한 기능을 순수 CSS와 JavaScript로 구현할 경우 코드량이 많아지고 유지보수도 어려워질 수 있다.

따라서 검증된 슬라이드 라이브러리인 Swiper를 사용하기로 했다.

Swiper 라이브러리 설치

npm install swiper

기본 Swiper 사용 방법

React에서는 swiper/react 패키지를 사용해 컴포넌트 형태로 사용할 수 있다.

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

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

import { Pagination } from "swiper";

export default function App() {
  return (
    <Swiper pagination={true} modules={[Pagination]} className="mySwiper">
      <SwiperSlide>Slide 1</SwiperSlide>
      <SwiperSlide>Slide 2</SwiperSlide>
      <SwiperSlide>Slide 3</SwiperSlide>
      <SwiperSlide>Slide 4</SwiperSlide>
    </Swiper>
  );
}

이 코드만으로도 다음 기능을 쉽게 구현할 수 있다.

• 슬라이드 이동
• 페이지네이션 표시
• 터치 및 드래그 이동

자동 슬라이드 및 반복 기능 추가

Swiper에서는 다양한 기능을 Module 방식으로 제공한다.

자동 슬라이드와 무한 반복을 위해 다음 모듈을 추가로 사용했다.

• Autoplay
• Pagination
  

import React from 'react';
import styled from 'styled-components';
import { Swiper, SwiperSlide } from 'swiper/react';
import { Pagination, Autoplay } from 'swiper/modules';
import 'swiper/css';
import 'swiper/css/pagination';
import backGroundUrl from '../assets/images/mypage/mypageBackground.png';
    
const MainPage = () => {
    return (
        <>
            <StyledSwiper 
                pagination={{ clickable: true }} 
                modules={[Pagination, Autoplay]}
                autoplay={{ delay: 3000, disableOnInteraction: false }}
                loop={true}
            >
                <StyledSwiperSlide1></StyledSwiperSlide1>
                <StyledSwiperSlide2></StyledSwiperSlide2>
                <StyledSwiperSlide3></StyledSwiperSlide3>
            </StyledSwiper>
        </>
    );
};
    
export default MainPage;
    
/* CSS */
const StyledSwiper = styled(Swiper)`
  background-color: #F4EFFF;
  width: 100%;
  height: 25em;
  .swiper-pagination-bullet {
    width: 10px;
    height: 10px;
    background-color: #8E59FF;

    &.swiper-pagination-bullet-active {
    	background-color: #8E59FF;
    }
  }
`;
const StyledSwiperSlide1 = styled(SwiperSlide)`
	background-image: url(${backGroundUrl});
`;
const StyledSwiperSlide2 = styled(SwiperSlide)`
	background-image: url(${backGroundUrl});
`;
const StyledSwiperSlide3 = styled(SwiperSlide)`
	background-image: url(${backGroundUrl});
`;

적용 결과

Reference

swiper/react를 이용하여 반응형 캐러셀 만들기
Swiper Demos