Swiper 슬라이드 사용해보기

일단 스와이퍼 사이트는 이곳이다.

https://swiperjs.com/

Swiper - The Most Modern Mobile Touch Slider

 

중간 배너를 만들어야하는데 회사에서 이미 Swiper를 사용하고 있어서 이걸 이용해서 만들었다. 

일단 홈페이지에 너무 친절하게 예시와 코드가 나와있어서 크게 어려울 건(?) 없었다.

 

우선 슬라이드에 보여줄 아이템들을 만들어준다.

const items = [{
  id: 1,
  imgSrc : imgSrc1,
},{
  id: 2,
  imgSrc : imgSrc2,
}]

 

나는 autoplay를 사용할거라 이 부분을 참고했다. (참고)

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

const MidBannerSlide = () => {
  return (
    <$container>
      <Swiper
        modules={[Autoplay]}
        spaceBetween={0}
        slidesPerView={1}
        autoplay={{delay: 4000,
          disableOnInteraction: false}}>
        {items.map((item) => {
          return (
            <SwiperSlide><$imgContainer key={item.id}><img src={el.imgSrc} alt=""/></$imgContainer></SwiperSlide>
          )
        })}
      </Swiper>
    </$container>
  )
};

 

옵션

• module : 사용할 모듈, [] 안에 사용할 모듈을 넣어준다.
  • AutoPlay : 자동재생
  • Scrollbar : 슬라이드에 스크롤 바 노출
• autoplay 
  • delay: 시간 설정
  • disableOnInteraction : 스와이프 후 자동재생 (false 가 스와이프 이후 자동재생)
• spaceBetween : 슬라이드 사이 여백
• slidesPerView : 한 슬라이드에 보여줄 갯수

이 외에도 다양한 옵션들과 예시가 많으니 홈페이지에 들어가서 보면 될 것 같다. 

 

다음엔 직접 만들어봐야지 ..!!