JavaScript에서 Swipe Library인 Swipe.js..

http://codepen.io/justincavery/pen/saEyI/

HTML Mobile 페이지 에서 Swipe를 구현해서 어떤 이미지나 내용들은 보여줘야 한다면 위의  URL에 나오는 Swipe.js를 추천한다.

swipe.js를 검색해서 나오는 Git Hub에 가면 소스페이지가 압축된 파일을 다운로드 받을수 있는데..

거기에 포함된 swipe.js파일을 추가하고 swipe.css파일을 추가하면 준비 작업은 끝이 난다.

링크된 사이트에 나와있는 HTML소스를 Body태그안에 넣고 JavaScript에 제일 우측에 있는 JS소스를 긁어다 넣으면 모든 작업은 끝이난다.

돌리면 돌아갈까..?

압축해서 제공 되는 CSS에는 제일 중요한 내용이 빠져있어서 제대로 돌아가지 않는다.

.swipe {

  overflow: hidden;

  visibility: hidden;

  position: relative;

}

.swipe-wrap {

  overflow: hidden;

  position: relative;

}

.swipe-wrap > div {

  float:left;

  width:100%;

  position: relative;

}

위의 코드가 제일 중요한데 위의 내용만 빠진체 소스를 배포 하고 있는것 같다.

아니면 내가 잘못 받았던가.

이 소스는 링크에 있는 사이트 중앙에 위치한 CSS안에 있는 내용이며 저 코드가 없으면 화면이 제대로 나오지 않는다.

jQuery-mobile과 function Name이 중복되서 오류를 일으킨다는 썰도 있으니 jQuery-mobile를 사용하지 않고 단독으로 swipe,js만을 사용할때만을 권장한다. 모험정신이 있는 사람은 한번 중복으로 사용해봐도 무방하리라 본다.

암튼 CSS때문에 두시간 삽질함..