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
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 | ๋ง์ฐ์ค ๋๋๊ทธ ์ฌ์ฉ |
| 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 | ์๋์ฐ ๋ฆฌ์ฌ์ด์ฆ ์ฝ๋ฐฑ |
