jquery slick 슬라이더 라이브러리 사용하기

웹사이트를 만들다보면, 슬라이드기능을 사용해야할 때가 있다. 

그럴때 유용하게 쓸수있는 라이브러리인 

slick 슬라이더 사용법에 대해 알아보자. 

 

 

 slick 설치 

https://kenwheeler.github.io/slick/

slick - the last carousel you'll ever need

slick 홈페이지 상단의 get it now를 누른뒤 다운로드 받고

작업대상 폴더에 옮긴 후 사용하거나

깃허브 소스를 다운받아 사용해도 된다.

 

 

CDN 으로 사용할시엔 아래 소스를 넣어주고 사용하도록 하자.

참고로 CDN CSS에 파일명을 바꾼   ex) slick/slick-theme.css  

한줄을 더 추가해서 사용하는 식으로도 사용이 가능하다 

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

 

 slick 사용하기 

css, js, jquery를 추가해 준뒤, 

//html head 부분에 CSS 추가
  <link rel="stylesheet" type="text/css" href="slick/slick.css">
  <link rel="stylesheet" type="text/css" href="slick/slick-theme.css">

//제이쿼리,JS 추가
  <script src="https://code.jquery.com/jquery-2.2.0.min.js" type="text/javascript"></script>
  <script src="slick/slick.js" type="text/javascript" charset="utf-8"></script>

 

 

마크업 된 html div의 클래스와 같은 코드를 자바스크립트안에 넣어주고 사용하면 된다. 

<section class="fade slider">
  <div>
  <img src="http://placehold.it/1200x300?text=1">
  </div>
  <div>
  <img src="http://placehold.it/1200x300?text=2">
  </div>
  <div>
  <img src="http://placehold.it/1200x300?text=3">
  </div>
</section>

$('.fade').slick({
  dots: true,
  infinite: true,
  speed: 500,
  fade: true,
  autoplay: true,
  autoplaySpeed: 2000,
  cssEase: 'linear'

});

 

홈페이지에 사용할수있는 

여러가지 디자인의 슬라이더 코드가 있으니

참고하여 사용하도록 하자.