Skip to content

dohoons/jquery.touchFlow

master
Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
 
 
 
 
 
 

jquery.touchFlow

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

Demo

http://dohoons.com/test/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 윈도우 리사이즈 콜백