jquery.touchSlider
- jQuery ๊ธฐ๋ฐ์ ํ๋ฆฌํน ๋ด๋น๊ฒ์ด์ ํ๋ฌ๊ทธ์ธ
- ๋งํฌ์ ์์ ์ ํ์ ์ ์ฝ์ด ์์ผ๋ฉฐ ์ด๋ณด์๋ ์ฝ๊ฒ ์ฌ์ฉํ๋๋ก ์ค๊ณ
- CSS Selector์ ๋ฐ๋ผ ๋ค์ค ์ ์ฉ ๊ฐ๋ฅ
- PC ๋ธ๋ผ์ฐ์ ์์ ๋๋๊ทธ๋ก ์ฌ์ฉ๊ฐ๋ฅ (๊ธฐ๋ณธ ์ต์ ์ผ๋ก ํฌํจ v1.3.0)
- jQuery 1.7+, IE7+ ์ง์
Demo
์ค์น ๋ฐฉ๋ฒ
<script> ํ๊ทธ๋ก ์นํ์ด์ง์ ์ถ๊ฐ
<script src="jquery.touchSlider.js"></script>
๋๋ NPM์ผ๋ก ์ค์นํด์ ์ฌ์ฉ
$ npm i jquery.touchslider
var $ = require('jquery'); require('jquery.touchslider')($);
๊ธฐ๋ณธ ์ฌ์ฉ๋ฒ
#touchSlider { background:#ccc; position:relative; overflow:hidden; } #touchSlider ul { position:absolute; top:0; left:0; overflow:hidden; } #touchSlider ul li { height:150px; background:#9C9; font-size:14px; color:#fff; }
<div id="touchSlider"> <ul> <li style="background:#9C9">content 1</li> <li style="background:#396">content 2</li> <li style="background:#39C">content 3</li> <li style="background:#33C">content 4</li> </ul> </div>
$("#touchSlider").touchSlider({ // ... Options page: 2 });
React.js์์ ์ฌ์ฉํ๊ธฐ
Options
Option Name | Type | Default | Description |
---|---|---|---|
mode | String | 'swipe' | ์ฌ๋ผ์ด๋ ๋ชจ๋ ('swipe' or 'fade') |
page | Number | 1 | ์ด๊ธฐ ํ์ด์ง |
speed | Number | 150 | ํ์ด์ง ๋๊น ์ ๋๋ฉ์ด์ ์๋ (ms) |
view | Number | 1 | ํ์ด์ง ๋น ์์ดํ ๊ฐ์ |
gap | Number | 0 | ์์ดํ ์ฌ์ด ๊ฐ๊ฒฉ (pixel) |
range | Number | 0.15 | ํ์ด์ง ๋๊น ํ์ ๋ฒ์ |
roll | Boolean | true | ์ฌ๋ผ์ด๋ ๋๊น ์ํ |
resize | Boolean | true | ์๋ ๋ฆฌ์ฌ์ด์ฆ |
controls | Boolean | true | prev, next ๋ฒํผ ์์ฑ |
paging | Boolean | true | page control ์์ฑ |
sidePage | Boolean | false | ์ธก๋ฉด ํ์ด์ง ์ฌ์ฉ |
transition | Boolean | true | CSS Transition ์ฌ์ฉ |
useMouse | Boolean | true | ๋ง์ฐ์ค ๋๋๊ทธ ์ฌ์ฉ ์ฌ๋ถ |
btn_prev | Object | null | ์ฌ์ฉ์ prev ๋ฒํผ (jQuery Objec) |
btn_next | Object | null | ์ฌ์ฉ์ next ๋ฒํผ (jQuery Objec) |
autoplay | Object | { enable: false, pauseHover: true, addHoverTarget: '', interval: 3500 } | ์๋์์ง์ ๊ด๋ จ ์ต์ |
breakpoints | Object | null | ๋ธ๋ ์ดํฌ ํฌ์ธํธ ์ต์ |
Method
Name | Description |
---|---|
go_page(index) | index ํ์ด์ง๋ก ์ด๋ |
autoPlay() | ์๋ ๋๊น ์์ |
autoStop() | ์๋ ๋๊น ์ ์ง |
autoPauseToggle() | ์๋ ๋๊น ์์/์ ์ง ํ ๊ธ |
CallBack
Name | Description |
---|---|
initComplete | ์ฌ๋ผ์ด๋๊ฐ ์ด๊ธฐํ๋ ํ ์์ |
counter | ์ฌ๋ผ์ด๋๋ฅผ ๋๊ธด ํ ์์ |