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 파일을 사용하여 모바일웹에 적합하게 만든 데모입니다.
-
http://www.google.com/ Lore
-
devuk2332
-
Anonymous
-
-
Enarastudent
-
codefactory
-
Recent Comments