swipejs 플러그인 활용하기

* swipejs 플러그인

- 스마트폰 액정에서 손으로 터치하여 좌우로 밀어 이전 또는 다음 배너로 넘어가는 터치 슬라이드 배너를 쉽고 간단하게 만들 수 있음.

- 기본 메서드 적용 방법(기본형)

window.mySwipe = $(요소 선택).Swipe({     옵션 설정  }).data('Swipe');

 

- swipejs 플러그인의 옵션 종류

종류	설명
startSlide: 숫자 (default:0)	인덱스 값으로 초기에 열릴 슬라이드를 지정함.
auto: 밀리초	자동 슬라이드 이동 시간을 설정함.
continuous: 논릿값 (default:true)	슬라이드 이동 시 연속적으로 반복, 롤링되어 나오게 할 것인지 설정함.
disableScroll: 논릿값 (default:false)	브라우저에 스크롤바를 사용할 것인지 여부를 결정함.
stopPropagation: 논릿값 (default:false)	이벤트 발생 시 하위 요소에 이벤트가 전달되는 것을 차단시킬 수 있음.
callback: 익명 함수	이벤트가 완전히 완료되면 익명 함수에 스크립트 코드가 실행됨.
transitionEnd: 익명 함수	슬라이드 전환이 완전히 완료되면 익명 함수에 스크립트 코드가 실행됨.

-> "Swipe(요소 선택, {...}).data('Swipe')'" 메서드의 중괄호({...}) 사이에 옵션을 입력함.

-> 옵션은 JSON 형식처럼 키(key)와 값(value) 쌍으로 이루어져 있음.

-> 옵션을 어떻게 설정하느냐에 따라 터치 슬라이드 배너의 이동 속도와 반복 설정, 롤링 여부 등이 결정됨.

 

- http://github.com/bradbirdsall/Swipe 에서 플러그인 파일을 다운로드 받을 수 있음.

 

 

내용 출처 : Do It! 자바스크립트+제이쿼리 입문 (정인용 지음, 이지스퍼블리싱)