[React] Swiper 사용해서 슬라이드 만들기

Swiper React 공식 문서

📍 Swiper 설치

npm install swiper

📍 Swiper 사용 기본구조

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

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
      //import만해서 사용할 수 있는 것이 아니라 modules로도 같이 불러와야 된다
      modules={[Navigation, Pagination, Scrollbar, A11y]} /
      spaceBetween={50} //슬라이드 사이 간격 조정
      slidesPerView={3} //화면에 보여지는 슬라이드 개수
      navigation //슬라이드 prev/next 버튼 불러오기
      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 사용해서 슬라이드 만들기

슬라이드 부분을 swiper로 사용해봤다. 사용할 swiper기능은 pagination버튼을 클릭하면 넘어가는 것과 3초마다 자동으로 넘어가는 기능이다.

import { data } from "../data";
import "./../App.css";

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

import "swiper/css";
import "swiper/css/navigation";
import "swiper/css/pagination";
import styled from "styled-components";

// 메인페이지) 배너광고
const BannerAd = () => {
  return (
    <Wrap>
      <Swiper
        modules={[Pagination, Navigation, Autoplay]}
        spaceBetween={50}
        slidesPerView={1}
        pagination={{ clickable: true }}
        autoplay={{ delay: 3000, disableOnInteraction: false }}
        loop={true}
      >
        {data.bannerAdData.map((bannerAdItem) => {
          return (
            <SwiperSlide key={bannerAdItem.id} className="swiperBanner">
              <div className="banner swiper-slide swiper-slide-active">
                <h2>{bannerAdItem.title}</h2>
                <h3>{bannerAdItem.subTitle}</h3>
              </div>
            </SwiperSlide>
          );
        })}
      </Swiper>
    </Wrap>
  );
};

export default BannerAd;

배너광고이기 때문에 slidesPerView={1} 로 설정하여 화면에 꽉차게 넣어줬다. 3초마다 자동으로 다음배너로 넘어가게 되는데 만들면서 문제가 있었다. 위에 코드에는 문제가 없지만 아래 코드를 확인하면 이유를 확인 할 수 있다.

📍 Swiper로 슬라이드를 만들면서 겪게된 문제점

⚠️ Wrap을 Swiper안에 감쌈

<Swiper
// 모듈 코드생략
>
<Wrap>
  {bannerAd.map((bannerAdItem) => {
    return (
      <SwiperSlide key={bannerAdItem.id} className="swiperbanner">
        <div className="banner swiper-slide swiper-slide-active">
          {bannerAdItem.img}
        </div>
      </SwiperSlide>
    );
  })}
</Wrap>
</Swiper>

문제점을 말해보자면 styled-component로 준 Wrap은 브라우저의 전체사이즈인데 슬라이드 만드는 안에 Wrap으로 감싸줬기 때문에 모든 CSS가 먹히지 않았다. 커스텀하는 방법부터 swiper클래스를 불러와서 수정해 봤는데도 작동이 안 되길래 뭐가 문제이지 싶었는데 구조 문제였다.. 전체영역을 swiper가 감싸고 있던 것 때문에 당연히 안 됐던 것이였다.