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 ๋ฏธ๋ฐ์)