slick-slide

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

먼저 라이브러리를 다운받거나 cdn으로 가져와야한다.
여기서 다운

중요한 사실은 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.....)
             .
             .
             .
    })
});

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