slick
반응형 웹을 지원하는 jQuery 슬라이더 라이브러리
사용법
.html 파일의 상단 <head>에 css 파일 추가
<!-- Add the slick-theme.css if you want default styling -->
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"/>
<!-- Add the slick-theme.css if you want default styling -->
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick-theme.css"/>.html 파일의 하단 </body> 앞에 js 파일 추가
<script type="text/javascript" src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>.html
<div class="slider">
<div><h3>1</h3></div>
<div><h3>2</h3></div>
<div><h3>3</h3></div>
<div><h3>4</h3></div>
</div>.js
$('.slider').slick({
infinite : true, //무한 반복
slidesToShow : 1, // 표시될 element 개수
slidesToScroll : 1, // 슬라이딩시 움직일 element 개수
draggable : false //드래그 가능 여부
});github Settings에서 자세한 속성을 확인해 사용한다.
반응형
breakpoint 가로 사이즈별로 속성을 설정
$(".slider").slick({
// normal options...
//
responsive: [{
breakpoint: 1024, // 가로 사이즈
settings: {
slidesToShow: 3,
infinite: true
}
}, {
breakpoint: 600,
settings: {
slidesToShow: 2,
dots: true
}
}, {
breakpoint: 300,
settings: "unslick" // destroys slick
}]
});