Library] Swiper

Swiper

이번에 프로젝트 진행하면서 사용한 Swiper 라이브러리에 대해 적어보려고 합니다.

공식 홈페이지는 아래와 같습니다.

https://swiperjs.com/react

 

제가 요즘은 React만 사용하고 있기 때문에 React방식으로 작성하였습니다.

 

 

---

 

 

설치

npm i swiper

 

 

---

 

 

기본 구성

 

공식 홈페이지에 나와있는 소스에서 이것저것 수정해 봤습니다.

간단히 설명하고, 제가 사용했던 방법 설명하려고 합니다.

 

• modules : 기본 Swiper 외에 모듈을 추가하여 디자인을 수정할 수 있습니다.
  Navigation, Pagination, Scrollbar 총 3가지 모듈을 추가한 상태입니다.
  사용된 모듈들은 추가로 옵션을 설정할 수 있습니다.
  위 예시로는 pagination과 scrollbar에 옵션이 추가된 상태입니다.
• spaceBetween : 슬라이드와 슬라이드 사이 간격입니다.
  원래 slidesPerView 값이 없을 경우에는 슬라이드 하나가 전체를 차지하기 때문에
  slidesPerView 옵션을 사용할 경우 사용하시면 됩니다.
• slidesPerView : 하나의 화면에 몇 개의 슬라이드를 보여줄지 정해줍니다.
  값이 없을 경우 전체를 한 개의 슬라이드가 차지하게 됩니다.
• navigation : navigation옵션 사용 유무입니다.
• pagination : pagination옵션 사용 유무입니다. 
• scrollbar : scrollbar옵션 사용 유무입니다. 
• onSwipeer : Swiper가 실행 됐을 때, 함수를 실행할 수 있습니다.
• onSlideChange : Slide를 바꿨을 때, 함수를 실행할 수 있습니다.

사용된 옵션에 대한 설명을 간단히 하였고, 훨씬 더 많은 옵션이 있는데 자세한 사항은 아래 공홈에 나와있습니다.

https://swiperjs.com/swiper-api

 

위의 내용만으로도 기본적인 Swiper를 구성할 수 있을 것으로 보입니다.
공홈에 Demo로 예시도 나와있으니 참고하시면 될 듯합니다.

 

 

---

 

 

적용 사례

import { Mousewheel, Pagination } from 'swiper';
import { Swiper, SwiperSlide } from 'swiper/react';


import 'swiper/css';
import 'swiper/css/pagination';
import 'swiper/css/navigation';


function Swiper() {
    return (
    <Swiper
      direction="vertical"
      pagination={{
        clickable: true,
        el: '.customPagination',
        dynamicBullets: true,
        dynamicMainBullets: 5,
      }}
      mousewheel
      modules={[Pagination, Mousewheel]}
      allowTouchMove={false}
      onSlideChange={swiper => {
        dispatch(...);
      }}
      style={{
        width: `${String(80 * scale)}vh`,
        height: `${String(80 * scale)}vh`,
        minWidth: '482px',
        minHeight: '482px',
      }}
    >
      {data.map(value => (
        <SwiperSlide key={value.id}>
          <SlideComponent
            img={value}
            key={value.id}
            setActive={setActive}
          />
        </SwiperSlide>
      ))}
    </Swiper>
  );
}

export default Swiper;

 

실제는 더 복잡하지만, 많이 생략하고 지워서 간단하게 Swiper소스만 설명하려고 합니다.

처음에 Swiper 라이브러리 사용할 때, 뭔가 실제로 사용한 예시를 찾고 싶었는데 많이 없어서 조금 시행착오를 겪었고, 조금은 더 도움이 되지 않을까 싶습니다.(나중에 내가 다시 사용할 때도 보면 좋고...)

 

• direction : 값을 'vertical'을 줘서 기존에 가로로 움직이던 슬라이드를 세로로 바꿨습니다.
• pagination : pagination을 사용하였고, 4가지 옵션을 추가하였습니다.
  • clickable : pagination 사용으로 생긴 Bullet을 눌러서 슬라이드를 이동할지에 대한 옵션입니다.
  • el : 기본으로 제공하는 pagination을 커스텀마이징하려고 추가하였습니다. 
  • dynamicBullets : 사용되는 Bullet을 강조하기 위하 옵션입니다.
  • dynamicMainBullets : 위에서 강조한 Bullet의 개수를 정해줍니다.

 <div className="customPagination" />

• mousewheel : 마우스 휠을 사용해서 다음 슬라이드로 넘어갈 수 있도록 해줍니다.
• allowTouchMove : 슬라이드를 드래그해서 넘기게 되면 슬라이드가 넘어가는데, 이를 막기 위해 사용했습니다.
• style : Swiper에 style을 줘서 직접 css를 수정하였습니다.

추가로 Slide를 Component로 나눠서 개발하였습니다.

혹시나 CSS를 수정하려고 했는데 적용이 안되시는 분들은 새로 만든 css파일이 아닌 global.css에 적용하셨는지 확인하시고, devtool 찍어보면서 원하는 스타일에 !important 적어주시면 될 것입니다.

 

 

---

 

 

많이 사용될만한 라이브러리이지 않나 싶습니다.
웹페이지 돌아다니다보면 많이 보이는 기능이기도 하고, 활용도도 높아 보입니다.