React Swiper

보기 쉽게 정리하려 포스팅합니다.

 

1. Swiper 설치

npm i swiper

 

2. 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

 

2. Swiper 반응형

 

3. Swiper scrollbar

 

 

4. Swiper navigation

 

 

5. Swiper pagination

 

 

 

https://swiperjs.com/react

https://codesandbox.io/s/swiper-react-slides-per-view-auto-forked-0g3xc?file=/src/styles.css:826-840 

https://velog.io/@function_dh/JavaScript-Swiper-%EC%82%AC%EC%9A%A9%EB%B2%95-%EC%8A%AC%EB%9D%BC%EC%9D%B4%EB%93%9C-%EA%B5%AC%ED%98%84

https://ktsmemo.cafe24.com/s/SwiperJS/365