Bootstrap 캐러셀에 Swife 기능 추가하기

Bootstrap3에는 캐러셀 기능이 포함되어 있습니다. 하지만 이 기능에서 아쉬운 점은 모바일 장치에서 Swife(터치 슬라이드)는 지원하지 않는다는 점 입니다. 이 부분은 jQuery의 플러그인을 추가하여 어렵지 않게 구성할 수 있습니다.

Bootstrap의 캐러셀 기능은 다음의 URL을 참고하시기 바랍니다.

http://getbootstrap.com/javascript/#carousel

우선 다음과 같은 캐러셀이 구성되어 있다고 가정하겠습니다.

 

코드가 추가된 후에는 다음의 jQuery 플러그인을 다운받아 작성중인 HTML 페이지에 참조시킵니다.

jquery-touchswipe

이제 다음의 자바스크립트 코드를 추가하면 모바일 장치에서 터치 슬라이드가 완성됩니다.

 

1 thought on “Bootstrap 캐러셀에 Swife 기능 추가하기

댓글 남기기