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

    Wait, I caonnt fathom it being so straightforward.

  • devuk2332

    jquery.featureCarousel.custom.js 수정된 파일을 얻고 싶은데 가능하시다면 donjuang0702@naver.com으로 보내주시면 감사하겠습니다^^;;
    소스보기에서는 확인이 안되네요 ㅠ_ㅠ

    • Anonymous

      안녕하세요
      아 네, 그 파일은 위 포스트에 있는 QR코드 위에 있는 [데모보기] 페이지에서 소스보기를 하시면 나오는데요, 소스보기에서 확인이 안되신다니 제가 jquery.featureCarousel.custom.js의 링크 url을 따로 알려드리겠습니다.
      http://codefactory.kr/examples/2011-08-15/jquery.featureCarousel.custom.js
      입니다.

  • Enarastudent

    정말 좋은블로그네요. 잘보고갑니다.ㅎ

    • codefactory

      감사합니다..^^