jquery.touchSlider

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

Demo

http://dohoons.com/test/flick

설치 방법

<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에서 사용하기

• Example : https://codesandbox.io/s/jquerytouchslider-ri7zy

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 | | --- | --- | | init(options) | 슬라이더 초기화 | | destroy() | 슬라이더 기능 제거 | | go_page(index) | index 페이지로 이동 | | autoPlay() | 자동 넘김 시작 | | autoStop() | 자동 넘김 정지 | | autoPauseToggle() | 자동 넘김 시작/정지 토글 |

CallBack

| Name | Description | | --- | --- | | initComplete | 슬라이더가 초기화된 후 호출 | | destroyComplete | 슬라이더 기능이 제거된 후 호출 | | counter | 슬라이더를 넘긴 후 호출 |