🙋 이 문서를 보고 나면
- 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>