Slick 사용방법 [ 슬라이드 api ]

#slick#슬라이드api#간편슬라이드

 

안녕하세요. Gi_1입니다.

 

다양하고 간단한 슬라이드를 구현api slick 포스팅입니다.

slick은 슬라이드 방향, 속도, arrow버튼, autoplay, dots버튼 등을 간단하게 제어할 수 있습니다.

제가 1년간 퍼블리싱을 하면서 제일 많이 사용한 api이기도 하네요!

 

slick은 jquery기반으로 만들어진 라이브러리이므로 jQuery가 필요합니다.

우선 slick홈페이지에 접속합니다. 오른쪽 상단의 get it now를 클릭 후 다운로드 합니다.

slick.min.css파일과 slick.min.js파일을 업로드합니다. 저는 plugins 폴더 안에 넣겠습니다.

 

<link rel="stylesheet" href="../plugins/slick/slick.min.css">

<script src="../plugins/slick/slick.min.js"></script>

 

 

 

기본적인 구조

 

HTML

  <div class="slick-slide">

    <div>

      <p>1</p>

    </div>

    <div>

      <p>2</p>

    </div>

    <div>

      <p>3</p>

    </div>

  </div>

 

script

  <script>

    $(function(){

      $('.slick-slide').slick({

        slide: 'div',   //슬라이드 되어야 할 태그 ex) div, li

        infinite : true,  //무한 반복 옵션  

        slidesToShow : 4,   // 한 화면에 보여질 컨텐츠 개수

        slidesToScroll : 1,   //스크롤 한번에 움직일 컨텐츠 개수

        speed : 100,   // 다음 버튼 누르고 다음 화면 뜨는데까지 걸리는 시간(ms)

        arrows : true,    // 옆으로 이동하는 화살표 표시 여부

        dots : true,    // 스크롤바 아래 점으로 페이지네이션 여부

        autoplay : true,      // 자동 스크롤 사용 여부

        autoplaySpeed : 10000,    // 자동 스크롤 시 다음으로 넘어가는데 걸리는 시간 (ms)

        pauseOnHover : true,    // 슬라이드 이동  시 마우스 호버하면 슬라이더 멈추게 설정

        vertical : false,   // 세로 방향 슬라이드 옵션

        prevArrow : "<button type='button' class='slick-prev'>Previous</button>",   // 이전 화살표 모양 설정

        nextArrow : "<button type='button' class='slick-next'>Next</button>",   // 다음 화살표 모양 설정

        dotsClass : "slick-dots",   //아래 나오는 페이지네이션(점) css class 지정

        draggable : true,   //드래그 가능 여부

       

        responsive: [ // 반응형 웹 구현 옵션

          {  

            breakpoint: 960, //화면 사이즈 960px

            settings: {

              //위에 옵션이 디폴트 , 여기에 추가하면 그걸로 변경

              slidesToShow:3

            }

          },

          {

            breakpoint: 768, //화면 사이즈 768px

            settings: {

              //위에 옵션이 디폴트 , 여기에 추가하면 그걸로 변경

              slidesToShow:2

            }

          }

        ]

      });

    })

</script>

한 페이지에 slick을 두개 이상 사용하고 싶을 경우,

 

slick 클래스명을 각기 다르게 HTML로 제어하고, script에서도 다르게 설정하면 됩니다.

 

 

 

위 포스팅은 아래 블로그를 참고하여 작성하였습니다.

https://programmer93.tistory.com/34