slick slider jquery Plugin

 

제이쿼리 슬라이더 플러그인 slick

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

slick - the last carousel you'll ever need

slick-1.8.1.zip

0.05MB

CDN https://cdnjs.com/libraries/slick-carousel

 

 

 

 

기본세팅

---

<link rel="stylesheet" type="text/css" href="slick/slick.css"> //필수
<link rel="stylesheet" href="slick/slick-theme.css"> //선택
<script type="text/javascript" src="slick/slick.min.js"></script> //필수

또는 CDN 연결(추천)

 

2. HTML 

<div class="슬라이드근접부모">
       <div>slide1</div>
       <div>slide2</div>
       <div>slide3</div>
</div>

 

3. script 

$('슬라이드근접부모').slick();

 

4. script option

* Default 값을 변경하는 경우에만 사용합니다.

(그 외 다른 옵션은 slick 사이트를 참고하세요) kenwheeler.github.io/slick/

속성:값, 속성:값 순서로 작성합니다. 마지막 속성:값에는 콤마(,)를 붙이지 않습니다.

$('슬라이드근접부모').slick({
      fade: true,
      dots: true,
      autoplay:true,
      autoplaySpeed: 500
});

 

5. CSS

---

이전/다음 메뉴(기본) CSS selector

.slide button.slick-prev {}
.slide button.slick-next {}

 

인디케이터(기본) CSS selector

.slick-dots {} //인디케이터 전체 부모
.slick-dots li {} //인디케이터 근접 부모
.slick-dots button {} //인디케이터 클릭 요소
.slick-dots li.slick-active button {} //활성화 인디케이터

 

반응형 responsive slick plugin 구조

$('슬라이드부모').slick({
                responsive:[
                    {
                        breakpoint:768,settings:{
                            768이 참일때 적용 옵션:값
                        }
                    },{
                        breakpoint:480,settings:{
                            480이 참일때 적용 옵션:값
                        }
                    }
                ]
})