[React] Swiper 이미지 슬라이드 만들기 (Carousel, Fade)

 

처음에는 React-Material-Ui-Carousel 라이브러리를 사용해서 만들었다가

수정이 불편해서 Swiper라이브러리로 바꾸었다. 갓와이퍼;; 짱짱편하다.

 

해당 공식문서 예제를 보면서 참고했다.

https://swiperjs.com/react

Swiper React Components

 

사용하기위해 Swiper를 설치하자.

npm i swiper

Carousel 캐로셀? 이 정식명칭이라고 하는데 슬라이드가 입에 붙어서 슬라이드로 설명하겠다.

 

슬라이드를 하기위한 영역을 Swiper컴포넌트로 감싸주고 슬라이드할 요소들을 SwiperSlide컴포넌트로 만들어주면된다.

// 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';

return (
    <Swiper
      // install Swiper modules
      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와 SwiperSlide를 import해주고 사용하고자하는 css들도 import해주면된다.

 

Swiper를 살펴보면 props가 굉장히 많은데 별거없다. 사용하고싶은것만 사용해주면된다.

본인은 슬라이드로 넘어가는 효과말고 사라졌다가 생기는? fade효과를 주기위해 옵션을 변경하였다.

각 props별 역할은 다음과 같다.

• effect : slide,fade로 슬라이드시에 효과를 정한다.
• auotplay : 자동으로 슬라이드되게 한다.
• pagination : prev,next버튼이 생겨서 누르면 좌우로 슬라이드가 가능하다.
• modules : 사용할 모듈들을 넣는다. navigation을 넣어줘야 슬라이더 하단에 동그라미 인덱스들이 생긴다.
• loop : 슬라이드가 마지막에 도달했을때 슬라이드 시 처음 화면으로 간다. 무한스크롤 가능

본인은 이렇게만 사용했고 옵션들이 워낙많아서 사용하고싶은거 검색해서 쓰면된다.

공식문서에 예제도 굉장히 잘 되어있기에 따라하면된다.

fade효과나 navigation, pagination을 공식문서처럼 나오게 하려면 css를 import해줘야한다.

처음에 이거 안해줬다가 왜 안나오나 헤맸다.

    <Swiper
        effect={"fade"}
        autoplay={true}
        pagination={{
          clickable: true,
        }}
        modules={[Navigation, EffectFade, Pagination]}
        className="mySwiper"
        loop={true}
    >
        {items.map((item, idx) => {
          return (
            <SwiperSlide key={idx}>
              <img src={item.src} />
            </SwiperSlide>
          );
        })}
      </Swiper>

전체 소스코드는 아래와 같이 작성했다.

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

// Import Swiper styles
import "swiper/css";
import "swiper/css/effect-fade";
import "swiper/css/navigation";
import "swiper/css/pagination";
// import required modules
import { Autoplay, EffectFade, Navigation, Pagination } from "swiper";

export default function SliderContainer() {
  const items = [
    { src: "/assets/imgs/good.jpg" },
    { src: "/assets/imgs/genius.jpg" },
  ];
  return (
    <>
      <Swiper
        effect={"fade"}
        autoplay={{
          delay: 3000,
          disableOnInteraction: false,
        }}
        pagination={{
          clickable: true,
        }}
        modules={[Navigation, EffectFade, Pagination,Autoplay]}
        className="mySwiper"
        loop={true}
      >
        {items.map((item, idx) => {
          return (
            <SwiperSlide key={idx}>
              <img src={item.src} />
            </SwiperSlide>
          );
        })}
      </Swiper>
    </>
  );
}

navigation의 위치를 바닥에 딱 붙이고 투명도도 주고싶었기때문에 css를 수정해주었다.

개발자 도구로 찍어서 클래스명을 본거라 정확하지않다. 

.swiper-pagination.swiper-pagination-clickable.swiper-pagination-bullets.swiper-pagination-horizontal {
bottom: 0px;
}
.swiper-pagination-horizontal {
opacity: 0.5;
}