- slick 슬라이더 사용법 및 옵션 정리 -
slick slider는 반응형 웹을 지원하는 슬라이더 라이브러리다.
여러가지 슬라이더 라이브러리가 있지만 그 중에서 가장 좋은 라이브러리 같다.
1. slick 다운로드 및 js, css 파일 로드
slick 홈페이지의 오른쪽 상단에 get it now를 클릭 후 다운로드
기본적으로 slick slider는 jQuery 기반으로 만들어진 라이브러리라 jQuery가 필요하다.
slick-theme.css 의 기본 다음 및 이전 화살표 버튼은 횐색바탕에 투명색으로 설정이 되어 있어 배경화면이 흰색인 경우 잘 안 보이기에 상황에 맞게 수정이 필요하다.
<link rel="stylesheet" type="text/css" href="/plugin/slick/slick.css"/>
<link rel="stylesheet" type="text/css" href="/plugin/slick/slick-theme.css"/>
<script type="text/javascript" src="/js/jquery.js"></script>
<script type="text/javascript" src="/plugin/slick/slick.js"></script>
2. 기본 사용법
slick slider의 기본 HTML 구성은 아래의 코드처럼 div의 형태로 구성되어 있는 html 문서를 슬라이더 형태로 변경을 해준다.
만약 div 형태가 아닌 다른 태그는 아래 써둔 slide 옵션을 조정하면 된다.
더 자세한 옵션은 slick의 도큐먼트(https://github.com/kenwheeler/slick/)를 참고하자.
<!-- stlye 은 slick 영역 확인용 -->
<div style="padding:300px 100px; background-color: skyblue;">
<div id="slider-div" >
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
<div>10</div>
</div>
</div> <script>
$(function(){
$('#slider-div').slick({
slide: 'div', //슬라이드 되어야 할 태그 ex) div, li
infinite : true, //무한 반복 옵션
slidesToShow : 4, // 한 화면에 보여질 컨텐츠 개수
slidesToScroll : 1, //스크롤 한번에 움직일 컨텐츠 개수
speed : 100, // 다음 버튼 누르고 다음 화면 뜨는데까지 걸리는 시간(ms)
arrows : true, // 옆으로 이동하는 화살표 표시 여부
dots : true, // 스크롤바 아래 점으로 페이지네이션 여부
autoplay : true, // 자동 스크롤 사용 여부
autoplaySpeed : 10000, // 자동 스크롤 시 다음으로 넘어가는데 걸리는 시간 (ms)
pauseOnHover : true, // 슬라이드 이동 시 마우스 호버하면 슬라이더 멈추게 설정
vertical : false, // 세로 방향 슬라이드 옵션
prevArrow : "<button type='button' class='slick-prev'>Previous</button>", // 이전 화살표 모양 설정
nextArrow : "<button type='button' class='slick-next'>Next</button>", // 다음 화살표 모양 설정
dotsClass : "slick-dots", //아래 나오는 페이지네이션(점) css class 지정
draggable : true, //드래그 가능 여부
responsive: [ // 반응형 웹 구현 옵션
{
breakpoint: 960, //화면 사이즈 960px
settings: {
//위에 옵션이 디폴트 , 여기에 추가하면 그걸로 변경
slidesToShow:3
}
},
{
breakpoint: 768, //화면 사이즈 768px
settings: {
//위에 옵션이 디폴트 , 여기에 추가하면 그걸로 변경
slidesToShow:2
}
}
]
});
})
</script>
slick slider 가 적용이 되면 아래와 같은 화면이 나온다.
3. 자주 사용하는 함수
slider 제거하기
slick을 unslick 하지 않은 상태에서 다시 slick을 하면 Cannot read property 'add' of null 에러가 뜬다.
따라서 이미 만들어진 slick을 제거한 후 다시 slick을 해줘야지 제대로 슬라이더가 만들어진다.
// slick 파괴
$('#slider-div').slick("unslick")※ 예전 버전의 슬릭에는 unslick 함수에 memory leak (메모리 누수) 버그가 있다. 최신 버전을 사용하자.
slider에 새로운 아이템 추가하기
이미 slick이 적용이 되어 있는 상태에서 슬라이더를 동적으로 추가하고 싶다면 다음과 같은 옵션을 사용하면 된다.
$('#slider-div').slick('slickAdd',"<div>새로운 아이템</div>");
slider에 있는 아이템 삭제하기
인자값으로 여러가지를 줄 수 있다.
$('#slider-div').slick('slickRemove',0); //특정 인덱스 번호에 있는 slider 삭제
$('#slider-div').slick('slickRemove',false); //false이면 맨 마지막 슬라이더 삭제
$('#slider-div').slick('slickRemove',true); // true이면 맨 앞 슬라이더 삭제
현재 보여지는 슬라이더가 몇번째 슬라이더인지 확인하기
$('#slider-div').slick('slickCurrentSlide'); // 가장 첫번째에 있는 슬라이드는 0번이다.
자동 슬라이드 넘기기 정지 / 시작
$('#slider-div').slick('slickPause'); // 정지
$('#slider-div').slick('slickPlay'); // 시작
원하는 슬라이드로 이동
이 함수는 이상하게 도큐먼트에 안나와 있어서 구글링하다 발견했다.
$('#slider-div').slick('goTo', 1); // slick('goTo', index ) index는 0부터 시작이다.
slick slider를 사용하면 보통 이 정도의 function을 자주 사용하는 거 같다.