[Slide] Slick slider 사용법

Swiper Slider 와 같이 자주 사용되는 Slick slider 사용법입니다.

반응형 웹을 지원하는 슬라이더 라이브러리 입니다 :)

 

제일 먼저 할 일은 슬릭 슬라이드 홈페이지에서 css, js 파일을 다운로드 하는것입니다.

1. 사이트 접속 후 필요한 파일 다운로드하기 http://kenwheeler.github.io/slick/

slick - the last carousel you'll ever need

 

2. 코드 작업란에 파일, 또는 링크를 불러와 줍니다.

<link rel="stylesheet" type="text/css" href="파일경로/slick.css">
<script type="text/javascript" src="파일경로/slide_slick.js"></script>

 

3. 기본 사용법

slick slider 의 기본 html 구조다.

<div class="class">
   <div class="class2">content1</div>
   <div class="class2">content2</div>
   <div class="class2">content3</div>
</div>

 

4. js 적용하기

자주 사용되는 옵션들만 정리해봤습니다.

이외 다양한 옵션들은 슬릭 슬라이드 홈페이지 참고하시면 됩니다 :)

$(document).ready(function(){
      $('.class').slick({
        slidesToShow: 1, //한번에 보여줄 슬라이드 갯수
        slidesToScroll: 1, //한번에 넘겨지는 슬라이드 갯수
        arrows: false, //넘기기 버튼 화살표 여부
        dots:false, //네비게이션 버튼 dot유형
        asNavFor: '.terms-nav', //함께 움직이는 슬라이드 메뉴영역
        infinite: false, //무한반복 옵션
        adaptiveHeight: true, // 슬라이더 높이를 현재 슬라이드에 맞춤
        autoplay:true, //자동스크롤 사용 여부
        autoplaySpeed : 2000, //자동 스크롤시 다음으로 넘어가는 시간 (초)
        draggable:true //드래그 가능여부
      });
});

 

 

밑에는 예시로 만든 화면입니다 

참고하시면 될것같아요. :)

 

 

See the Pen Untitled by jh-baek-95 (@jh-baek-95) on CodePen.