🙋 이 문서를 보고 나면

• swiperjs 라이브러리를 이용해서 React로 스와이퍼 구현할 수 있다.

📝 수동으로 움직이는 좌우 스와이프 구현하기

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

<Swiper
  spaceBetween={spaceBetween}
  slidesPerView={perView}
  speed={300}
  pagination={{ clickable: true }}
  allowTouchMove
  slidesOffsetAfter={50}
>
  <SwiperSlide key={key}>
    <img src={lineup.img} alt={lineup.img} />
  </SwiperSlide>
</Swiper>

📝 자동으로 움직이는 상하 스와이프 구현하기

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

<Swiper
  direction="vertical"
  loop
  autoplay={{
    delay: 2500,
      disableOnInteraction: false,
  }}
  modules={[Autoplay]}
  className="mySwiper"
  >
    <SwiperSlide>
      <div>안녕하세요</div>
    </SwiperSlide>
  ))}
</Swiper>