Skip to content


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?

Latest commit


Git stats


Failed to load latest commit information.
Latest commit message
Commit time


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


설치 방법

<script> 태그로 웹페이지에 추가

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

또는 NPM으로 설치해서 사용

$ npm i jquery.touchslider
var $ = require('jquery');

기본 사용법

#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">
		<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>
	// ... Options
	page: 2

React.js에서 사용하기


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 브레이크 포인트 옵션


Name Description
init(options) 슬라이더 초기화
destroy() 슬라이더 기능 제거
go_page(index) index 페이지로 이동
autoPlay() 자동 넘김 시작
autoStop() 자동 넘김 정지
autoPauseToggle() 자동 넘김 시작/정지 토글


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