웹 개발/웹프로그래밍
JavaScript | Swiper 슬라이드 메뉴
KISCH
2021. 2. 7. 13:14
반응형
스와이퍼 플러그인
스와이퍼 플러그인은 터치 슬라이드 플러그인입니다. 아래에서 다운로드 받을 수 있습니다.
http://www.idangero.us/swiper
http://www.idangero.us/swiper/demos/
구조
swiper-container —
swiper-wrapper—
swiper-slide—
소스
javascript
|
1
2
3
|
new Swiper( '.swiper-container', {
// 옵션
});
|
cs |
옵션
autoHeight : true — 자동높이조절
autoplay — 자동 슬라이드 설정
breakpoints — 반응형 설정
centeredSlide : true — 슬라이드가 가운데로 배치
freeMode : false — 슬라이드 넘길 때 위치 고정 여부
loop : true — 슬라이드 반복
navigation {} — 네비게이션
pagination — 페이징
slidesPerView : 'auto' — 한 슬라이드에 보여줄 개수
spaceBetween : — 슬라이드 사이 여백
slideOffsetBefore : number — 슬라이드 시작 부분 여백
slideOffsetAfter : number — 슬라이드 끝 부분 여백
메소드
.slideTo() — 해당 슬라이드로 이동
.slidePrev() — 이전 슬라이드로 이동
.slideNext() — 다음 슬라이드로 이동
.destroy() — 슬라이드 제거
관련포스트
반응형