jQuery carousel 만들기 – 모바일웹에서는 좌우 swipe로 이동

jQuery로 carousel (컨베이어 벨트, 회전목마 같은 효과) 을 만들어 보겠습니다. carousel을 만드는데 사용할 jQuery plugin은 제가 직접 만든 것은 아니고 Brian K orsborne이라는 분이 만든 http://www.bkosborne.com/jquery-feature-carousel 을 사용할 것입니다. 이 plugin은 전면에 3개의 이미지만 보여줄 수 있게 고정되어 있지만, 꽤 좋은 것 같습니다.

먼저 이 plugin을 사용해서 만든 간단한 데모를 한번 보시죠

[데모보기]

이 carousel을 스마트폰에서 터치해서 넘겨보고 싶었습니다. 기본적으로 위 plugin 들에는 touch에 대한 이벤트는 포함되어 있지 않기 때문에 몇몇 작업을 추가해줘야 합니다. 모바일기기의 특성을 살릴 수 있도록, 손가락으로 좌우로 swipe하면(flicking이라고도 함, 손으로 슬라이드 하는 것) 이미지가 넘어가게 만드는 것입니다.

이것을 위해 먼저 swipe 이벤트를 사용할 수 있게 해주는 wipetouch라는 plugin을 사용했습니다. http://wipetouch.codeplex.com/ 여기에서 받으실 수 있습니다.

그리고 위에서 사용한 jquery.featureCarousel.js 파일의 몇몇 부분을 고쳐서 jquery.featureCarousel.custom.js 라는 파일을 만들었습니다. 이 파일은 아래의 데모보기에서 소스보기를 하시면 나옵니다.

• 원본에서 carousel되는 항목이 div만 되도록 고정되어 있던 것을 plugin을 호출할 때 옵션에서 조절할 수 있게 바꾸고 기본값은 li로 설정했습니다. (이건 모바일과 상관 없지만 수정)
• wipetouch를 사용해서 좌우로 swipe할 때 한 항목씩 움직이도록 설정했습니다. wipetouch의 사용유무를 plugin을 호출할 때 옵션에서 조절하도록 했습니다.

위 내용을 수정한 jquery.featureCarousel.custom.js 파일과 jquery.wipetouch.js 파일을 사용하여 모바일웹에 적합하게 만든 데모입니다.

[데모보기]