![[JavaScript] Slick](/title-images/59.jpg)
[JavaScript] Slick
슬릭 JS (slick)
카로셀(carousel)에 유용한 library
Slick 공식사이트 바로가기 GitHubSlick Js 슬라이드이미지(carousel) 을 사용하는 유용한 javascript Library이다.
install
# NPM
npm i slick-carousel
# Bower
bower install --save slick-carousel
간단한 사용법
<html>
<head>
<!-- Add the slick-theme.css if you want default styling -->
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/[email protected]/slick/slick.css"/>
<!-- Add the slick-theme.css if you want default styling -->
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/[email protected]/slick/slick-theme.css"/>
</head>
<body>
<div data-slick='{"slidesToShow": 4, "slidesToScroll": 4}'>
<div><h3>1</h3></div>
<div><h3>2</h3></div>
<div><h3>3</h3></div>
<div><h3>4</h3></div>
<div><h3>5</h3></div>
<div><h3>6</h3></div>
</div>
<!-- Slick 스크립트 시작 -->
<script type="text/javascript" src="//cdn.jsdelivr.net/npm/[email protected]/slick/slick.min.js"></script>
<script>
$(element).slick({
// normal options...
infinite: false,
// the magic
responsive: [{
breakpoint: 1024,
settings: {
slidesToShow: 3,
infinite: true
}
}, {
breakpoint: 600,
settings: {
slidesToShow: 2,
dots: true
}
}, {
breakpoint: 300,
settings: "unslick" // destroys slick
}]
});
</script>
</body>
</html>