React swiper 라이브러리 사용

패스트 캠퍼스에서   swiper 라이브러리 사용에 대해서 배우게 되었다. (패캠 프론트엔드 초격차 강의)

공식 문서는 

https://swiperjs.com/react

Swiper - The Most Modern Mobile Touch Slider

사용한 예시 코드는 다음과 같다.

 <Container>
      <h2>{title}</h2>
      <Swiper
        // install Swiper modules
        modules={[Navigation, Pagination, Scrollbar, A11y]}
        loop={true} //loop 기능을 사용할 것인지
        navigation // arrow 버튼 사용 유무
        pagination={{ clickable: true }} //페이지 버튼 보이게 할지
        breakpoints={{
          1378: {
            slidesPerView: 6, //한번에 보이는 슬라이드 개수
            slidesPerGroup: 6,
          },
          998: {
            slidesPerView: 5, //한번에 보이는 슬라이드 개수
            slidesPerGroup: 5,
          },
          625: {
            slidesPerView: 4, //한번에 보이는 슬라이드 개수
            slidesPerGroup: 4,
          },
          0: {
            slidesPerView: 3, //한번에 보이는 슬라이드 개수
            slidesPerGroup: 3,
          },
        }}
      >
        <Content id={id}>
          {movies?.map((movie) => (
            <SwiperSlide key={movie.id}>
              <Wrap>
                <img
                  key={movie.id}
                  src={`https://image.tmdb.org/t/p/original${movie.backdrop_path}`}
                  alt={movie.name}
                  onClick={() => handleClick(movie)}
                />
              </Wrap>
            </SwiperSlide>
          ))}
        </Content>
      </Swiper>

      {modalOpen && (
        <MovieModal {...movieSelected} setModalOpen={setModalOpen} />
      )}
    </Container>

이중에서 Container와 Content Wrap태그는 styled-components 라이브러리를 사용해서 만든 스타일드 컴퍼넌트입니다.

 

 

 

좌측 Usage 탭에서 모듈들을 확인할 수 있다. (강의랑 import 주소가 다릅니다 'swiper/modules'로 수정) --> 매번 달라질 수 있어서 공식문서 확인하는게 좋아요

 

내가 적용한 모듈은 

 modules={[Navigation, Pagination, Scrollbar, A11y]}

각각의 모듈은

• Navigation - Navigation module
• Pagination - Pagination module
• Scrollbar - Scrollbar module
• A11y - Accessibility module

공식 사이트 예시 코드에서도 그렇고 기분적으로 사용하는 친구들입니다.

이후 style 탭을 통해서 확인하고 자기가 사용하고 싶은 css를 임포트 하면 됩니다

// import swiper style
import 'swiper/css';
import 'swiper/css/navigation';
import 'swiper/css/scrollbar';
import 'swiper/css/pagination';
import styled from 'styled-components';

이후
Swiper 안에서 map 메서드를 통해서 각각의 SwiperSlide를 생성하면 된다.

 

좌우의 흰 버튼이 Swiper의 navigation 이고 , 우측 하단의 점들이 pagination이다.

 

Swiper 에 들어가는 어트리뷰트는 아래 링크에서 확인할 수 있다.

https://swiperjs.com/swiper-api#parameters

Swiper - The Most Modern Mobile Touch Slider

 

breakpoints 는 화면 크기에 따라 보여주는 것을 어떻게 다르게 할 지 설정하는 것이다.

loop는 슬라이더가 끝에 갔을 떄 루프를  통해 다시 처음으로 이동가능하게 하는 것이다.