[React] Swiper 라이브러리 사용방법

Swiper 사용해서 슬라이드 만들기
swiper를 사용해서 슬라이드를 만든 적이 있는데 정확하게 다루는 방법에 대한 게시글은 아직 작성하지 못한 것 같아서 블로그를 써보려고 한다.

Swiper 공식 사이트

🔹Swiper 설치

// 둘 중 하나 선택해서 설치
npm i swiper
npm install swiper

🔹import 하기

// Swiper와 사용할 모듈 그리고 모듈에 대한 css까지 불러와야 한다. 
//이건 프로젝트마다 필요한게 다 다르기 때문에 그때마다 필요한 것만 불러오면 된다.

import { Swiper, SwiperSlide } from "swiper/react"; //(필수)
import { Navigation, Pagination, Scrollbar, Autoplay } from "swiper/modules";
//(모듈 선택)

import "swiper/css"; //(필수)
import "swiper/css/navigation"; //(선택)
import "swiper/css/pagination"; //(선택)
import "swiper/css/scrollbar"; //(선택)

< 자주 사용하는 모듈 >

• navigation : next, prev에 대한 버튼 설정
• pagination : 슬라이드 페이지 개수에 대한 이동 버튼 설정
• scrollbar : 슬라이드를 넘길 수 있는 스크롤바 설정
• autoPlay : 자동으로 슬라이드를 넘겨주는 모듈. delay 옵션을 통해서 속도 조절 가능함
  

모듈만 적는다고 해서 위 이미지 처럼 되는 건 아니다. 모듈을 불러왔으면 모듈을 어떻게 사용해야 될 지에 대한 내용도 적어줘야 한다. 아래 참고하기

Swiper 기본 옵션

//사용할 모듈 받아오기
<Swiper modules={[ Navigation, Pagination, Scrollbar, Autoplay ]} 
		speed={1000},
    	spaceBetween={15},
		slidesPerView={4},
    	navigation: {
         nextEl: ".swiper-button-next",
         prevEl: ".swiper-button-prev",
		},
    	loop={true},
    	autoplay={{ delay:1000 }},
    	pagination={{ clickable: true }},
        scrollbar={{ draggable: true }},
    	breakpoints={{
    		320: {
        		slidesPerView: 1,
            	spaceBetween: 25
        	},
        	880: {
            	slidesPerView: 2,
        		spaceBetween: 25
        	},
        	1280: {
        		slidesPerView: 3,
        		spaceBetween: 25
		}}}>
</Swiper>

< 자주 사용하는 옵션 >

• speed : 슬라이드 넘어가는 속도 지정
• spaceBetween : 슬라이드 간의 간격 지정
• slidesPerView : 화면에 슬라이드가 보여질 개수
• navigation : next, prev에 대한 버튼 설정 여부
• loop : 마지막 슬라이드에서 첫번째 슬라이드로 이동(무한 반복)
• autoPlay : 자동으로 슬라이드를 넘겨주는 모듈. delay 옵션을 통해서 속도 조절 가능함
• pagination : 슬라이드 페이지 개수에 대한 이동 버튼 설정 여부
• scrollbar : 슬라이드를 넘길 수 있는 스크롤바 설정 여부
• breakpoints : 지정한 화면 크기마다 슬라이드 보여질 개수 지정. 즉 반응형에 유용함.

---

기본 옵션 연습

const SlideList = ({ slideData }) => {
  return (
    <SlideListWrap className="SlideListWrap">
      <h2>(1) Swiper 기본옵션</h2>
      <Swiper
        modules={[Navigation, Pagination, Scrollbar, Autoplay]} //4가지 모듈 다 사용함
        spaceBetween={15} //슬리이드 간의 간격
        slidesPerView="4.5" //화면에 보여질 슬라이드 개수
        autoplay={true}//시간마다 슬라이드 자동으로 넘겸짐
        navigation //이전버튼, 다음버튼 클릭 시 슬라이드 이동
        pagination={{ clickable: true }}//슬라이드 개수에 대한 이동버튼 
        scrollbar={{ draggable: true }}//클릭 앤 드래그로 이동 가능
      >
        {slideData.map((slideItem) => {
          return (
            <SwiperSlide className="swiper-slide" key={slideItem.id}>
              <SlideItem />
            </SwiperSlide>
          );
        })}
      </Swiper>
    </SlideListWrap>
  );
};

export default SlideList;

기본 옵션으로만 간단하게 구현해봤다. 커스텀 없이 하는 거라 쉽긴 했는데 <Swiper>위치랑 <SwiperSlide>위치가 살짝 헷갈려서 조금 헤매긴 했었다 일단은 Swiper의 위치부터 설명하자면 <SlideListWrap> 내부에 적어줘야 한다. 외부에 적게 됐을 땐 slide가 한개로 인식이 되기 때문에 정상작동이 불가하다

그리고 <SwiperSlide>같은 경우에는 map으로 반복생성했기 때문에 내가 반복할 컴포넌트를 감싸줘서 각각의 슬라이드를 확인할 수 있게 만들었다.

---

영화 포스터 슬라이드 연습

<슬라이드 구현한 순서>

(1) Swiper 공식 사이트 ➡️ Resources ➡️ Demos에 들어가보면 다양한 슬라이드 디자인이 있다. 마음에 드는 슬라이드 선택 후 React 버튼을 누르게 되면 슬라이드를 만들 수 있는 코드를 확인할 수 있다.

(2) 슬라이드를 만들 수 있는 코드가 나오는데 복사/붙여넣기해서 내가 필요한 것들만 사용하되, 문법은 잘 지켜서 해야 한다.

(3) 내가 한 방법은 이미지 파일을 따로 만들고, 이미지를 불러와서 사용했다. 반복되는 걸 하나하나 쓰지 않고 map으로 반복해서 이미지를 불러왔다.

그리고 movieItem.id를 사용할 수 있는 이유는 이것 또한 내가 data를 따로 만들었기 때문에 코드가 정상 작동 되는 것이다. 이외에 방법은 map 두번째 인자에 i를 넣어서 i + 1을 해주는 방법도 있으나 이건 가독성에 좋지 않다. 보통은 id로 많이 사용한다.

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

import "swiper/css";
import "swiper/css/effect-coverflow";
import "swiper/css/pagination";
import "./index.css";

import { EffectCoverflow, Pagination } from "swiper/modules";
import { movieImages } from "./movie-images";

const MovieSlide = ({ slideData }) => {
  return (
    <>
      <h2>(2) Swiper 영화 슬라이드</h2>
      <Swiper
        effect={"coverflow"} //3D처럼 펼쳐지는 효과
        grabCursor={true} //슬라이드 드래그 할 때 cursor 모양 손 모양으로 변함
        centeredSlides={true} // 슬라이드 중앙 위치
        slidesPerView={3.5} //화면에 보여질 슬라이드 개수
        initialSlide={2} //슬라이드 시작 순서 (index번호이기 때문에 주의 !)
        coverflowEffect={{
          rotate: 50, //(기본값이자 각도 조절)
          stretch: 0, //(기본값이자 슬라이드 간격 조절)
          depth: 100, //(기본값이자 슬라이드가 얼마나 깊게 들어가 보일 지 설정)
          modifier: 1, //(기본값이자 숫자가 올라갈 수록 원근감 강조됨) 
          slideShadows: false, //(슬라이드 그림자 설정)
        }}
        pagination={{ clickable: true }} //버튼 활성화
        modules={[EffectCoverflow, Pagination]} // 사용할 모듈 설정
        className="mySwiper"
      >
        {slideData.map((movieItem) => {
          return (
            <SwiperSlide key={movieItem.id} className="SwiperSlide">
              <img src={movieImages(movieItem.id)} alt={`Movie ${movieItem.id}`} width="90%" />
            </SwiperSlide>
          );
        })}
      </Swiper>
    </>
  );
};

export default MovieSlide;