이미지 슬라이더(Images Slider - Responsive Web Design)

http://wolfharu.tistory.com/archive/20120207

jQuery와 미디어 쿼리를 이용하여 만들어본 이미지 슬라이더


이미지 슬라이더(Images Slider) 형태의 컨텐츠는 대부분의 사이트에서 너무 일반적으로 사용하는 유형입니다.

jQuery에서 제공되는 보통의 이미지 슬라이더 기능에 반응형 웹디자인(Responsive Web Design)을 더해 해상도가 작은 디바이스에서도 최적화된 화면을 제공하도록 만들어 본 jQuery Plugins입니다.

또한, 사이트 방문자의 접속 환경이 데스크탑이나 노트북 환경이 아닌 스마트폰이나 태블릿 환경과 같이 터치 이벤트(Touch event)를 제공하는 경우 이전, 다음 버튼과 함께 손가락을 좌우로 배너를 움직여 더 쉽게 컨텐츠를 찾을수 있도록 해주는 좌우 플로킹 기술이 적용되도록 구현해 보았습니다.

데모보기

 WolfHaruSlider.zip

그리고 여러분은 저의 베타테스터 인거 잊지 마시고 댓글로 평가 부탁드려요

PS) 참고로 IE에서는 현재 미디어 쿼리가 구현되지 않으므로..

      크롬 브라우저를 이용하여 브라우저의 크기를 작게 하시면 확인하실수 있으며,
      아니면 웹서버에 올리신후 스마트폰을 사용하여 확인하실 수도 있습니다. 

      특히, 터치이벤트를 이용한 좌우 플로킹을 경험하시려면 스마트폰이나 태블릿을 이용하여야만 가능합니다. 

WolfHaruSlider.zip