slick-slide

반응형 웹을 지원하는 슬라이더 라이브러리로 나는 여러 article을 슬라이더 효과를 주어 표현하고자 사용하게 되었다.

먼저 라이브러리를 다운받거나 cdn으로 가져와야한다. kenwheeler.github.io/slick/

-중요한 사실은 jQuery 기반으로 만들어진 라이브러리라 jQuery가 필요하다.

 

<link rel="stylesheet" type="text/css" href="/plugin/slick/slick.css"/>

<link rel="stylesheet" type="text/css" href="/plugin/slick/slick-theme.css"/>

 

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

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

 

예시)

 

<div style="padding:300px 100px; background-color: skyblue;">

<div class="slider-div" >

    <div>1</div>

    <div>2</div>

    <div>3</div>

    <div>4</div>

    <div>5</div>

</div>

 

html 코드를 구성한 다음, 

 

$(function(){

      $('.slider-div').slick({

           slide: 'div'

            (option.....)

            (option.....)

            (option.....)

            (option.....)

            (option.....)

             .

             .

             .

 

    })

});

 

이런식으로 스크립트를 작성하면 된다