Web/React
React Swiper
__bo0o_
2021. 5. 31. 01:13
보기 쉽게 정리하려 포스팅합니다.
1. Swiper 설치
npm i swiper2. Swiper 옵션
1) 자주 쓰는 옵션
slidesOffsetBefore // 슬라이드 시작 부분 여백
slidesOffsetAfter // 슬라이드 끝 부분 여백
slidesPerView // 한 슬라이드에 보여줄 개수
spaceBetween // 슬라이드 사이 여백
initialSlide // 시작 위치 값
centeredSlides // true 시 슬라이드가 가운데로 배치
navigation={{ // 네비게이션 적용, < >
nextEl: '.swiper-button-next', // 다음 버튼 클래스명
prevEl: '.swiper-button-prev', // 이전 버튼 클래스명
}}
pagination={{ // 페이징 적용, 1 2 3 4 5
el: '.pagination', // 페이저 버튼 클래스명
clickable: true, // 버튼 클릭 여부
type: 'bullets', // 버튼 모양 결정, bullets, fraction
// 등등 ...
}}
scrollbar={{ // 스크롤바 적용
el: '.swiper-scrollbar',
draggable: true,
}},
breakpoints // 반응형 설정
2) 사용법
<Swiper
className="example"
slidesOffsetBefore={24}
slidesOffsetAfter={24}
slidesPerView={3}
spaceBetween={8}
initialSlide={1}
centeredSlides={true}
navigation={true}
pagination={{
clickable: true,
}}
scrollbar={{ draggable: true, dragSize: 24 }}
breakpoints={{
0: {
slidesOffsetBefore: 0,
slidesPerView: 1,
spaceBetween: 8,
centeredSlides: false,
},
500: {
slidesOffsetBefore: 16,
slidesPerView: 2,
spaceBetween: 8,
centeredSlides: false,
},
...
}}
>
<SwiperSlide>
...
https://swiperjs.com/swiper-api
Swiper API
Swiper is the most modern free mobile touch slider with hardware accelerated transitions and amazing native behavior.
swiperjs.com
2. Swiper 반응형
3. Swiper scrollbar
4. Swiper navigation
5. Swiper pagination
https://codesandbox.io/s/swiper-react-slides-per-view-auto-forked-0g3xc?file=/src/styles.css:826-840