๐Ÿ”” Alert..!! Get 2 Month Free Cloud Hosting With $200 Bonus From Digital Ocean ACTIVATE DEAL

touchSlider is a simple, flexible jQuery plugin for creating a responsive, touch-enabled slider which supports any types of html elements.

Carousel Content-slider

Documentation

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์—์„œ ์‚ฌ์šฉํ•˜๊ธฐ

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 ์Šฌ๋ผ์ด๋”๋ฅผ ๋„˜๊ธด ํ›„ ์‹œ์ž‘

You May Also Like