๐ slick-slider
slick-slider ๋ ๋ฐ์ํ ์น์ ์ง์ํ๋ jQuery ์ฌ๋ผ์ด๋ ๋ผ์ด๋ธ๋ฌ๋ฆฌ์ ๋๋ค.
๊ธฐ๋ณธ ์ฌ์ฉ๋ฒ๊ณผ ๋ฐ์ํ ์์ ๋ฐฉ๋ฒ์ ์ค๋ช ๋๋ฆฌ๊ฒ ์ต๋๋ค.
1. slick ๋ค์ด๋ก๋ ๋ฐ css,js ํ์ผ ๋ก๋
slick ๋ฉ์ธ ํํ์ด์ง ์ค๋ฅธ์ชฝ ์๋จ์
get it now๋ฅผ ํด๋ฆญํ ํ ๋ค์ด๋ก๋๋ฅผ ์งํํ๊ฑฐ๋ ๊ทธ ์๋์ CDN์ฃผ์๋ฅผ ๋ณต์ฌํด์<head>ํ๊ทธ์์ ๋ฃ์ด์ ์ฌ์ฉํ๋ฉด ๋ฉ๋๋ค.
๊ทธ๋ฆฌ๊ณ slick-slider๋ jQuery ๊ธฐ๋ฐ์ผ๋ก ๋ง๋ค์ด์ก๊ธฐ ๋๋ฌธ์ jQuery๊ฐ ํ์ํฉ๋๋ค.
CSS
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"/>
JS
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>2. ๊ธฐ๋ณธ ์ฌ์ฉ๋ฒ
slick-slider์ ๊ธฐ๋ณธ ๊ตฌ์ฑ์ ์๋ ์ฝ๋ ์ฒ๋ผ divํํ๋ก ๊ตฌ์ฑ๋์ด ์๋ html๋ฌธ์๋ฅผ ์ฌ๋ผ์ด๋ ํํ๋ก ๋ณ๊ฒฝํด์ค๋๋ค.
< HTML >
<div class="slider-wrap">
<div class="cont">1</div>
<div class="cont">2</div>
<div class="cont">3</div>
<div class="cont">4</div>
<div class="cont">5</div>
</div>
< JavaScript >
$(function(){
$('.slider-wrap').slick({
slide: 'div', //์ฌ๋ผ์ด๋ ๋์ด์ผ ํ ํ๊ทธ
infinite : true, //๋ฌดํ ๋ฐ๋ณต ์ต์
slidesToShow : 2, // ํ ํ๋ฉด์ ๋ณด์ฌ์ง ์ปจํ
์ธ ๊ฐ์
slidesToScroll : 1, //์คํฌ๋กค ํ๋ฒ์ ์์ง์ผ ์ปจํ
์ธ ๊ฐ์
speed : 500, // ๋ค์ ๋ฒํผ ๋๋ฅด๊ณ ๋ค์ ํ๋ฉด ๋จ๋๋ฐ๊น์ง ๊ฑธ๋ฆฌ๋ ์๊ฐ(ms)
arrows : true, // ์์ผ๋ก ์ด๋ํ๋ ํ์ดํ ํ์ ์ฌ๋ถ
dots : true, // ์คํฌ๋กค๋ฐ ์๋ ์ ์ผ๋ก ํ์ด์ง๋ค์ด์
์ฌ๋ถ
autoplay : true, // ์๋ ์คํฌ๋กค ์ฌ์ฉ ์ฌ๋ถ
autoplaySpeed : 2000, // ์๋ ์คํฌ๋กค ์ ๋ค์์ผ๋ก ๋์ด๊ฐ๋๋ฐ ๊ฑธ๋ฆฌ๋ ์๊ฐ (ms)
pauseOnHover : true, // ์ฌ๋ผ์ด๋ ์ด๋ ์ ๋ง์ฐ์ค ํธ๋ฒํ๋ฉด ์ฌ๋ผ์ด๋ ๋ฉ์ถ๊ฒ ์ค์
vertical : false, // ์ธ๋ก ๋ฐฉํฅ ์ฌ๋ผ์ด๋ ์ต์
prevArrow : "<button type='button' class='slick-prev'>Previous</button>",
nextArrow : "<button type='button' class='slick-next'>Next</button>",
draggable : true, //๋๋๊ทธ ๊ฐ๋ฅ ์ฌ๋ถ
responsive: [ // ๋ฐ์ํ ์น ๊ตฌํ ์ต์
{
breakpoint: 960, //ํ๋ฉด ์ฌ์ด์ฆ 960px
settings: {
slidesToShow: 4
}
},
{
breakpoint: 768, //ํ๋ฉด ์ฌ์ด์ฆ 768px
settings: {
slidesToShow: 5
}
}
]
});
})slick-slider ์ต์
๋ด์ responsive ์์ ํ๋ฉด์ฌ์ด์ฆ(breakpoint)๋ฅผ ์ง์ ํด ๋์ผ๋ฉด ๊ทธ ์์์๋ settings ๊ฐ์ผ๋ก ์ฌ๋ผ์ด๋๊ฐ ๋ณ๊ฒฝ๋ฉ๋๋ค.
3. ์์ฃผ ์ฌ์ฉ๋๋ ํจ์
slider์ ์๋ก์ด ์ปจํ
์ธ ์ถ๊ฐํ๊ธฐ
์ด๋ฏธ slick์ด ์ ์ฉ๋ ์ํ์์ ์ฌ๋ผ์ด๋๋ฅผ ๋์ ์ผ๋ก ์ถ๊ฐํ ๋ ์ฌ์ฉ๋ฉ๋๋ค.
$('.slider-wrap').slick('slickAdd',"<div>์๋ก์ด ์ปจํ
์ธ </div>");slider์ ์๋ ์ปจํ
์ธ ์ญ์ ํ๊ธฐ
์ด๋ฏธ slick์ด ์ ์ฉ๋ ์ํ์์ ์ฌ๋ผ์ด๋๋ฅผ ๋์ ์ผ๋ก ์ถ๊ฐํ ๋ ์ฌ์ฉ๋ฉ๋๋ค.
$('.slider-wrap').slick('slickRemove',0); //ํน์ ์ธ๋ฑ์ค ๋ฒํธ์ ์๋ slider ์ญ์
$('.slider-wrap').slick('slickRemove',false); //false์ด๋ฉด ๋งจ ๋ง์ง๋ง ์ฌ๋ผ์ด๋ ์ญ์
$('.slider-wrap').slick('slickRemove',true); // true์ด๋ฉด ๋งจ ์ ์ฌ๋ผ์ด๋ ์ญ์ ํ์ฌ ๋ณด์ฌ์ง๋ ์ฌ๋ผ์ด๋๊ฐ ๋ช๋ฒ์งธ์ธ์ง ํ์ธํ๊ธฐ
$('#slider-div').slick('slickCurrentSlide'); ์ํ๋ ์ฌ๋ผ์ด๋๋ก ์ด๋ํ๊ธฐ
$('#slider-div').slick('goTo', index);