slick 슬라이더 사용법

○ 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>

 

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을 자주 사용하는듯

 

 

참조

slick slider 사용법 및 옵션 (반응형 포함) - 삽질중인 개발자

slick 홈피 및 예제

slick - the last carousel you'll ever need