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

jdSlider is a simple-to-use yet highly customizable carousel/slideshow plugin designed for both desktop and mobile.

Carousel

Documentation

jdSlider

  • IE8~ ํ˜ธํ™˜.
  • ๋ฐ˜์‘ํ˜•์— ๋”ฐ๋ฅธ ์˜ต์…˜ ๋ณ€๊ฒฝ ๊ฐ€๋Šฅ.

HTML

  • ๊ธฐ๋ณธ๊ตฌ์กฐ
<div class="jd-slider slider1"> <!-- ์˜ต์…˜๊ฐ’์ด ๋‹ค๋ฅธ ๊ฒฝ์šฐ๋Š” slider1 ์ฒ˜๋Ÿผ ํด๋ž˜์Šค๋ฅผ ์ƒˆ๋กœ ์ถ”๊ฐ€ํ•˜์—ฌ ์…€๋ ‰ํ„ฐ๋กœ ํ™œ์šฉํ•œ๋‹ค -->   <div class="slide-inner"> <!-- ํ•„์š”์‹œ์—๋งŒ ๊ฐ์‹ผ๋‹ค -->     <ul class="slide-area">         <li>1</li>         <li>2</li>         <li>3</li>         <li>์ด๋ฏธ์ง€4</li>     </ul>     <a class="prev" href="#">์ด์ „<a>     <a class="next" href="#">๋‹ค์Œ</a>   </div>   <div class="controller">     <a class="auto" href="#"></a> <!-- ์žฌ์ƒ/์ •์ง€ ๋ฒ„ํŠผ -->     <div class="indicate-area"> <!-- ์ธ๋””์ผ€์ดํŠธ ๋‚ด๋ถ€ ๋น„์–ด๋†“์„ ์‹œ ์ž๋™์œผ๋กœ ์ƒ์„ฑ -->       <a href="#">1</a>       <a href="#">2</a>       <a href="#">3</a>       <a href="#">4</a>     </div>    </div> </div>

CSS

  • ๊ธฐ๋ณธ๊ตฌ์กฐ
.jd-slider .slide-area {     width: 100%;     margin: 0;     padding: 0;     -webkit-transform: translate3d(0, 0, 0);     transform: translate3d(0, 0, 0); }  /* ์Šฌ๋ผ์ด๋” ํ”Œ๋Ÿฌ๊ทธ์ธ์ด ํ™œ์„ฑํ™” ๋˜๊ธฐ ์ด์ „์— ๊นจ์ง€์ง€ ์•Š๊ฒŒ ํ•˜๊ธฐ ์œ„ํ•˜์—ฌ ์ฒซ๋ฒˆ์งธ li๋งŒ ๋…ธ์ถœ (slideShow:1 ์„ ๊ธฐ๋ณธ์œผ๋กœ ๊ตฌ์„ฑ) */ .jd-slider .slide-area li { 	display: none; 	float: left; 	width: 100%; } .jd-slider .slide-area li:first-child { 	display: block; }  /* ํŽ˜์ด๋“œ์ธ ๊ธฐ๋Šฅ ์‚ฌ์šฉ ์‹œ์— ๋งž๋Š” css ๊ตฌ๋ฌธ (slide-fade ํด๋ž˜์Šค ํ™œ์šฉ) */ .jd-slider.fade .slide-area li { 	display: block; 	position: absolute; 	top: 0; 	left: 0; 	opacity: 0; 	-webkit-transform: translateZ(0); 	transform: translateZ(0); } .jd-slider.fade .slide-area li:first-child { 	position: static; 	opacity: 1; }  /* ์ด๋ฒคํŠธ ์ปจํŠธ๋กค๋Ÿฌ hide (ํ”Œ๋Ÿฌ๊ทธ์ธ ์˜ต์…˜๊ฐ’ isUse:false ์ผ ๊ฒฝ์šฐ .jd-slider์— slider--none ํด๋ž˜์Šค ์ž๋™ ์ถ”๊ฐ€๋จ.) */ .jd-slider.slider--none .prev, .slider.slider--none .next, .slider.slider--none .controller { 	display: none; }

JS

  • ๋ฐ˜์‘ํ˜• ๊ธฐ๋ณธ๊ตฌ์กฐ
$('.slider1').jdSlider({   slideShow: 2,   slideToScroll: 2,   responsive: [{     viewSize: 768,     setting: {       slideShow: 1,       slideToScroll: 1     }   }] });
  • ์˜ต์…˜๊ฐ’
{     isUse: true, // ์Šฌ๋ผ์ด๋” ์ ์šฉ ์œ ๋ฌด     wrap: null, // ์Šฌ๋ผ์ด๋” ๋„ˆ๋น„ ๊ณ„์‚ฐ์˜ ๊ธฐ์ค€์ด ๋  ์„ ํƒ์ž (null์ผ ๊ฒฝ์šฐ default.slide ์„ ํƒ์ž๋ฅผ ํ–ฅํ•œ๋‹ค.)     slide: '.slide-area', // ์Šฌ๋ผ์ด๋“œ๋ฅผ ๊ฐ์‹ธ๋Š” ์„ ํƒ์ž     prev: '.prev', // ์ด์ „ ๋ฒ„ํŠผ ์„ ํƒ์ž     next: '.next', // ๋‹ค์Œ ๋ฒ„ํŠผ ์„ ํƒ์ž     indicate: '.indicate-area', // ์ธ๋””์ผ€์ดํŠธ ๋ฒ„ํŠผ์„ ๊ฐ์‹ธ๋Š” ์„ ํƒ์ž     auto: '.auto', // ์ž๋™์žฌ์ƒ ๋ฒ„ํŠผ ์„ ํƒ์ž     playClass: 'play', // ์ž๋™์žฌ์ƒ ๋ฒ„ํŠผ์—์„œ์˜ ์žฌ์ƒ class     pauseClass: 'pause', // ์ž๋™์žฌ์ƒ ๋ฒ„ํŠผ์—์„œ์˜ ์ •์ง€ class     noSliderClass: 'slider--none', // ์Šฌ๋ผ์ด๋“œ ๊ธฐ๋Šฅ์ด ์—†๋Š” ๊ฒฝ์šฐ ๋‚˜ํƒ€๋‚ผ class     willFocusClass: 'will-focus', // ๋ฒ„ํŠผ ์ด๋™ ์ ‘๊ทผ์„ฑ์„ ์œ„ํ•œ class     unusedClass: 'hidden', // ์‚ฌ์šฉ๋˜์ง€ ์•Š๋Š” prev, next ๋ฒ„ํŠผ์— ์ถ”๊ฐ€๋  class     slideShow: 1, // ํ™”๋ฉด์— ๋ณด์—ฌ์งˆ ์Šฌ๋ผ์ด๋“œ ์ˆ˜     slideToScroll: 1, // ์Šฌ๋ผ์ด๋”ฉ ๋˜์–ด์ง€๋Š” ์Šฌ๋ผ์ด๋“œ ์ˆ˜     slideStart: 1, // ์‹œ์ž‘ ์Šฌ๋ผ์ด๋“œ ๋ฒˆํ˜ธ     margin: null, // ์Šฌ๋ผ์ด๋“œ ๊ฐ„๊ฒฉ (margin-right์™€ ๋™์ผํ•˜๊ฒŒ ๊ตฌ์„ฑ ํ•„์š” | null์ผ ๊ฒฝ์šฐ style margin-right๊ฐ’์„ ๋”ฐ๋ฅธ๋‹ค.)     speed: 500, // ์Šฌ๋ผ์ด๋”ฉ ์†๋„ (1000 = 1์ดˆ)     timingFunction: 'ease', // ie9 ์ดํ•˜ ์ œ์™ธ ์ ์šฉ (transition-timing-function)     easing: 'swing', // ie9 ์ดํ•˜ ์ ์šฉ (animate easing)     interval: 4000, // ์ž๋™์žฌ์ƒ ์†๋„ (1000 = 1์ดˆ)     touchDistance: 20, // ์Šค์™€์ดํ”„ ํ—ˆ์šฉ ๊ฑฐ๋ฆฌ     resistanceRatio: .5, // ์Šค์™€์ดํ”„ ์ €ํ•ญ ๋น„์œจ     isOverflow: false, // ์‚ฌ์ด๋“œ ์˜์—ญ ๋…ธ์ถœ ์—ฌ๋ถ€     isIndicate: true, // ์ธ๋””์ผ€์ดํŠธ ์‚ฌ์šฉ ์œ ๋ฌด     isAuto: false, // ์ž๋™์žฌ์ƒ ์œ ๋ฌด (true ์‹œ ์ž๋™์žฌ์ƒ ์‹คํ–‰)     isLoop: false, // ๋ฌดํ•œ๋ฃจํ”„ ์œ ๋ฌด     isSliding: true, // ์Šฌ๋ผ์ด๋”ฉ ์œ ๋ฌด(ํŽ˜์ด๋“œ์ธ ์ ์šฉ์‹œ false)     isCursor: true, // ๋งˆ์šฐ์Šค์˜ค๋ฒ„์— ๋”ฐ๋ฅธ ์ž๋™์žฌ์ƒ ์กฐ์ ˆ ์œ ๋ฌด     isTouch: true, // ๋ชจ๋ฐ”์ผ ํ„ฐ์น˜ ์Šค์™€์ดํ”„ ์œ ๋ฌด     isDrag: true, // ์›น ๋“œ๋ž˜๊น… ์Šค์™€์ดํ”„ ์œ ๋ฌด     isResistance: true, // ์Šค์™€์ดํ”„ ์ €ํ•ญ ์œ ๋ฌด     isCustomAuto: false, // ์ž๋™์žฌ์ƒ ์ˆ˜๋™ ์ปจํŠธ๋กค ์œ ๋ฌด (์ž๋™์€ false)     autoState: 'auto', // ๋ฆฌ์‚ฌ์ด์ง•์‹œ ์žฌ์ƒ์ƒํƒœ ๋ณ€ํ™˜     indicateList: function (i) {         return '<a href="#">' + i + '</a>'; // ์ธ๋””์ผ€์ดํŠธ ์ปค์Šคํ…€     },     progress: function () {}, // ์Šฌ๋ผ์ด๋”ฉ ๋ฐœ์ƒ ์ฆ‰์‹œ ํ•จ์ˆ˜     callback: function () {}, // ์Šฌ๋ผ์ด๋”ฉ ์™„๋ฃŒ ํ›„ ํ•จ์ˆ˜     onPrev: function () {}, // prev ๋ฒ„ํŠผ ํด๋ฆญ ์‹œ ์ฝœ๋ฐฑํ•จ์ˆ˜     onNext: function () {}, // next ๋ฒ„ํŠผ ํด๋ฆญ ์‹œ ์ฝœ๋ฐฑํ•จ์ˆ˜     onIndicate: function () {}, // indicate ๋ฒ„ํŠผ ํด๋ฆญ ์‹œ ์ฝœ๋ฐฑํ•จ์ˆ˜     onAuto: function () {}, // auto ๋ฒ„ํŠผ ํด๋ฆญ ์‹œ ์ฝœ๋ฐฑํ•จ์ˆ˜     responsive: [         {             viewSize: 768, // break point(0~768)             settings: { // ํ•ด๋‹น ์˜์—ญ options ์„ค์ •                 isUse: true             }         }, {             viewSize: 1024, // break point(769~1024)             settings: { // ํ•ด๋‹น ์˜์—ญ options ์„ค์ •                 isUse: true             }         }     ] // ๋ฐ˜์‘ํ˜• ์˜ต์…˜ ์„ค์ • }
  • ์ด๋ฒคํŠธ ํŠธ๋ฆฌ๊ฑฐ
$(selector)     .trigger('init') // ๊ตฌ์กฐ ์ดˆ๊ธฐํ™” (๊ธฐ์กด ์˜ต์…˜๊ฐ’๋Œ€๋กœ ์žฌ์„ค์ •์ด ํ•„์š”ํ•  ๊ฒฝ์šฐ)     .trigger('update') // ์‚ฌ์ด์ฆˆ ๊ฐฑ์‹  (์Šฌ๋ผ์ด๋” ์ ์šฉ ํ›„ ์‚ฌ์ด์ฆˆ๋ฅผ ๊ฐ•์ œ๋กœ ์ˆ˜์ •ํ•œ ๊ฒฝ์šฐ)     .trigger('resizeFn') // ๋ฐ˜์‘ํ˜• ๋ถ„๊ธฐ๊ฐ€ ๋ณ€๊ฒฝ ๋˜์—ˆ์„ ์‹œ์—๋Š” init, ๊ฐ™์€ ๋ถ„๊ธฐ์ผ ์‹œ์—๋Š” update ์‹คํ–‰.     .trigger('removeFn') // ์Šฌ๋ผ์ด๋” ์ „์ฒด ๊ธฐ๋Šฅ ์ œ๊ฑฐ  $(indicateButton)     .trigger('moveTo') // indicateButton ์œผ๋กœ ์ด๋™ (progress, callback ๋ฏธ๋ฐœ์ƒ)

You May Also Like