jquery.touchFlow

• jQuery 기반의 수평or수직 터치스크롤 내비게이션 플러그인
• 마크업 요소 선택에 제약이 없으며 초보자도 쉽게 사용하도록 설계
• PC 브라우저에서 드래그로 사용가능 (기본 옵션으로 포함 v1.6.0)
• CSS Selector에 따라 다중 적용 가능
• jQuery 1.7+, IE9+ 지원

Demo

https://dohoons.github.io/jquery.touchFlow/

설치 방법

<script> 태그 추가

<script src="jquery.touchFlow.js"></script>

NPM

$ npm i jquery.touchflow

var $ = require('jquery');
require('jquery.touchflow')($);

기본 사용법

.nav_h_type { background: #ccc; position: relative; overflow: hidden; }
.nav_h_type ul { float: left; display: block; font-size: 0; white-space: nowrap; position: relative; }
.nav_h_type li { box-sizing: border-box; display: inline-block; width: 100px; height: 100px; line-height: 100px; vertical-align: top; text-align: center; font-size: 12px; background: #eee; border: 1px solid #ccc; }
.nav_h_type li.on { background: #aaa; font-weight: bold; }

<div class="nav_h_type">
	<ul>
		<li>contents 1</li>
		<li>contents 2</li>
		<li>contents 3</li>
		<li>contents 4</li>
		<li>contents 5</li>
		<li class="on">contents 6</li>
		<li>contents 7</li>
		<li>contents 8</li>
		<li>contents 9</li>
		<li>contents 10</li>
	</ul>
</div>

$(".nav_h_list").touchFlow({
	axis : "x",
	page : "li.on"
});

Options

Option Name	Defaut	Description
useMouse	true	마우스 드래그 사용
useWheel	true	휠스크롤 사용
axis	'x'	드래그 방향 ('x','y')
page	0	초기 페이지 (아이템 인덱스 숫자 or CSS 셀렉터 문자열)
speed	200	애니메이션 속도 (ms)
snap	false	스냅 기능 사용
scrollbar	false	스크롤바 표시
scrollbarAutoHide	false	스크롤바 자동숨김

Method

Name	Description
go_page(index)	index 페이지로 이동
posX()	X 위치값
posX(value)	X 위치값 변경
posY()	Y 위치값
posY(value)	Y 위치값 변경

CallBack

Name	Description
initComplete	초기화 콜백
stopped	스크롤 정지 콜백
resizeend	윈도우 리사이즈 콜백