○ 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 slider는 반응형 웹을 지원하는 슬라이더 라이브러리다. 여러가지 슬라이더 라이브러리가 있지만 그 중에서 가장 좋은 라이브러리 같다. 1. slick 다운로
programmer93.tistory.com
slick 홈피 및 예제
slick - the last carousel you'll ever need
slick is a responsive carousel jQuery plugin that supports multiple breakpoints, CSS3 transitions, touch events/swiping & much more!
kenwheeler.github.io
'공부방 > 기타' 카테고리의 다른 글
Eclipse 배경색 변경 (0) | 2023.01.07 |
---|---|
Front-End vs Back-End (0) | 2021.05.29 |
HTML 컬러 색상표 (0) | 2021.03.21 |
GNB·LNB·SNB(LNB)·FNB 용어 (0) | 2021.03.21 |
웹표준(웹호환성) 진단사이트 (0) | 2020.08.24 |