[javascript/jquery] slick slider library 사용법 및 예제

[javascript/jquery] slick slider library 사용법 및 예제

 

 

jquery 라이브러리 중에

 

슬라이더 형식으로 이미지를 나열해주는 라이브러리중 하나인

 

slick slider 라이브러리를 공유하고자 합니다.

 

swiper 도 있지만

 

slick 도 사용하기 편리한듯 합니다!

 

 

1. 우선 페이지 head 태그 안에 아래 javascript 와 css 를 로드합니다.

// javascript
<script type="text/javascript" src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>

// css
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"/>

 

 

2. 그리고 slick slider 를 적용시킬 타겟,

즉, 클래스나 아이디 등의 선택자에 아래와 같이 로드시킵니다.

$(document).ready(function(){
    $("TARGET").slick();
});

 

만약 클래스명이 slide 인 div 에 로드시킨다고 가정하면,

 

$(".slide").slick();

 

처럼 사용하시면 됩니다.

 

추가적으로 옵션들이 많이 있는데요!

 

이러한 옵션들은 공식사이트 링크 첨부할테니 꼭 가서 확인 후 사용하세요!

 

slick slider site url : kenwheeler.github.io/slick/

slick - the last carousel you'll ever need