JavaScript | Swiper 슬라이드 메뉴

 

스와이퍼 플러그인

 

스와이퍼 플러그인은 터치 슬라이드 플러그인입니다. 아래에서 다운로드 받을 수 있습니다.

http://www.idangero.us/swiper

http://www.idangero.us/swiper/demos/

 

 

구조

 

swiper-container — 

swiper-wrapper— 

swiper-slide— 

 

 

 

 

 

 

소스

 

javascript

new Swiper( '.swiper-container', {
    // 옵션
});

 

 

옵션

 

autoHeight : true — 자동높이조절

autoplay — 자동 슬라이드 설정

breakpoints — 반응형 설정

centeredSlide : true — 슬라이드가 가운데로 배치

freeMode : false — 슬라이드 넘길 때 위치 고정 여부

loop : true — 슬라이드 반복

navigation {} — 네비게이션 

pagination — 페이징

slidesPerView : 'auto' — 한 슬라이드에 보여줄 개수

spaceBetween : — 슬라이드 사이 여백

slideOffsetBefore : number — 슬라이드 시작 부분 여백

slideOffsetAfter : number — 슬라이드 끝 부분 여백

 

 

메소드

 

.slideTo() — 해당 슬라이드로 이동

.slidePrev() — 이전 슬라이드로 이동

.slideNext() — 다음 슬라이드로 이동

.destroy() — 슬라이드 제거

 

관련포스트

• JavaScript | 자바 스크립트 개요
• JavaScript | 자바스크립트 객체
• JavaScript | 자바스크립트 그래픽
• JavaScript | 자바스크립트 개발도구
• JavaScript | jQuery 셀렉터와 동작
• JavaScript | jQuery UI
• JavaScript | html2canvas 캡쳐 사용방법
• JavaScript | Ajax 기초