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 |