javascript & jQuery

Pluginslick

k9e4h 2016. 4. 5. 15:21

CDN


<link rel="stylesheet" type="text/css" href="http://cdn.jsdelivr.net/jquery.slick/1.5.8/slick.css"/>
<link rel="stylesheet" type="text/css" href="http://cdn.jsdelivr.net/jquery.slick/1.5.8/slick-theme.css"/>



Settings 


name(type default)


accessibility(boolean true)

탭이동과 페이지이동 Key 버튼을 활성화

인데 true로 설정하면 시작과 끝이 지정됨

defaullt가 true인데 왜 직접 쓴것과 안쓴것이 다른 건지 모르겠다..

안써주면 시작과 끝이 없이 계속 뱅뱅 슬라이드된다


adaptiveHeight(boolean false)

carousel의 높이 지정


autoplay(boolean false)

자동으로 slide 되는가


autoplaySpeed(int 3000)

ms를 의미


arrows(boolean true)

prev/next arrows


asNavFor(string null)

slider navigation의 이름 지정(class 나 id 이름으로)







예제코드



<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8" />

    <title>Insert title here</title>

    <link rel="stylesheet" type="text/css" href="http://kenwheeler.github.io/slick/slick/slick.css" />

    <link rel="stylesheet" type="text/css" href="http://kenwheeler.github.io/slick/slick/slick-theme.css" />

    <script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.min.js"></script>

    <script type="text/javascript" src="http://kenwheeler.github.io/slick/slick/slick.min.js"></script>

    <script type="text/javascript">

        $(document).ready(function () {


            //alert("Asd");

            $('.multiple-items').slick({

                infinite: true,

                slidesToShow: 4,

                slidesToScroll: 3

            });

        });

    </script>

</head>

<body>

    <div class="multiple-items">

        <div><button>1</button></div>

        <div><button>2</button></div>

        <div><button>3</button></div>

        <div><button>4</button></div>

        <div><button>5</button></div>

        <div><button>6</button></div>

    </div>

</body>

</html>

[dsdfdfadfsdfsdf





반응형

'javascript & jQuery' 카테고리의 다른 글

JavaScript 찔끔  (0) 2016.04.21
jQuery 찔끔  (0) 2016.04.12
[#4] Canvas & Animation  (0) 2016.04.12
Bootstrap  (0) 2016.03.31
[#1] web  (0) 2016.03.18