slick lib 사용

웹사이트들을 돌아다니다보면 슬라이드 되는 배너나 공지사항등을 많이 봤을것이다.

slick라는 라이브러리를 사용하면 보다 쉽게 구현이 가능하다.

 

참고 사이트 및 lib 다운로드 : http://kenwheeler.github.io/slick/

 

  <div class="your-class" style="width:500px;height:200px;border:1px #AAAAAA solid;font-size:30pt;">
    <div>1 content</div>
    <div>2 content</div>
    <div>3 content</div>
    <div>4 content</div>
    <div>5 content</div>
    <div>6 content</div>
    <div>7 content</div>
    <div>8 content</div>
    <div>9 content</div>
    <div>10 content</div>
  </div> 

 

<script type="text/javascript" src="./slick/slick.min.js"></script>

 

  <script type="text/javascript">
    $(document).ready(function(){
      $('.your-class').slick({
        dots: true,           //아래 점을 표시
        infinite: true,        //루프 옵션
        slidesToShow: 3,   //화면 표시 수
        slidesToScroll: 2   //스크롤 이동 수
      });
    });
  </script>