[JQUERY] slick slider 이미지 슬라이드 플러그인 설치 및 사용법

개인적으로 가장 잘되있다고 생각하는 이미지 슬라이드 플러그인입니다.

플러그인 자체에 사용 예제도 많고 사용법도 간단해서 자주 사용합니다.

또한 반응형까지 지원해줍니다.

 

우선 kenwheeler.github.io/slick/ 사이트에 가서 플러그인을 다운 받습니다.

상단 메뉴의 get it now > 다운로드에서 다운로드받으시면 됩니다.

 

 

01. 추가

사용방법은 가장 먼저, jqurey와 js, css를 추가해줍니다.

<link rel="stylesheet" type="text/css" href="slick/slick.css"/>
<script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.min.js"></script> 
<script type="text/javascript" src="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"/>

JS

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

 

그 다음 html에 div이나 ul을 사용하여 마크업해줍니다.

<ul class="slick">
	<li>이미지1</li>
    <li>이미지2</li>
    <li>이미지3</li>
</ul>

 

그 다음에는 js를 추가해줍니다. 아래항목은 기본적인 코드입니다 :)

$('.slick').slick();

 

다음은 slick 슬라이드의 옵션입니다.

$('.slick').slick({
  dots: true, //페이지 네비게이션
  arrows:true, // next, prev 이동 버튼
  autoplay:ture // 자동 넘김 여부
  infinite: false, //반복설정
  speed: 300, //슬라이드 속도
  autoplaySpeed : 10000,   // 자동 넘김시 슬라이드 시간
  pauseOnHover : true,// 마우스 hover시 슬라이드 멈춤
  vertical : false,  // 세로 방향 슬라이드 옵션
  prevArrow : "<button type='button' class='slick-prev'>Previous</button>",        
  nextArrow : "<button type='button' class='slick-next'>Next</button>", //화살표 커스텀
  slidesToShow: 4, //보여질 슬라이드 수
  slidesToScroll: 4, //넘겨질 슬라이드 수
  responsive: [ // -> 반응형 옵션
    {
      breakpoint: 1024, // 반응형 ~ 1024
      settings: {
        slidesToShow: 3,
        slidesToScroll: 3,
        infinite: true,
        dots: true
      }
    },
    {
      breakpoint: 600,// 반응형 ~ 600
      settings: {
        slidesToShow: 2,
        slidesToScroll: 2
      }
    },
    {
      breakpoint: 480,// 반응형 ~ 480
      settings: {
        slidesToShow: 1,
        slidesToScroll: 1
      }
    }
  ]
});

이외의 다양한 옵션과 예제들이 있어서 따로 커스텀해주지 않아도 좋아요 :)

하단의 사이트에서 관련 예제 확인하시고 참고하여 작업하면 좋을거같아요~

kenwheeler.github.io/slick/