반응형
1. css
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"/>2. html / script
jQuery가 필요한 슬라이더로, 요구되어지는 jQuery의 버전은 최소 1.7 이상이다.
기본형(default) : pager, prev/next button, loop 기능을 가진 full size의 슬라이드가 구현된다.
<div class="클래스명">
<div>Slide 1</div>
<div>Slide 2</div>
<div>Slide 3</div>
</div><script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>
<script>
$(document).ready(function(){
// 옵셥 사용하지 않을 경우
$('.single-item').slick();
// 옵셥 사용할 경우
$('.클래스명').slick({
// 옵션 삽입
});
});
</script>3. 옵션
swiper만큼이나 역시 정~말~ 다양한 옵션들이 있는데, 실무 작업시 자주 사용하는 옵션만 정리해보았다.
| Parameter | Type | default | 기능 |
| dots | boolean | false | dot 모양의 pager |
| infinite | boolean | true | 무한 스와이프 |
| slidesToShow | number | 1 | 한 화면에 보이는 슬라이드 개수 |
| variableWidth | boolean | false | 각 슬라이드 넓이에 맞게 슬라이드 영역내 보이는 슬라이드 수 자동 설정 |
| centerMode | boolean | false | 한 화면에 여러개의 슬라이드가 들어오는 경우, 활성화된 슬라이드 가운데 배치 |
| slidesToScroll | number | 1 | 슬라이드 실행할때, 한번에 슬라이드 되는 개수 |
| speed | number | 300 | 슬라이드 속도 |
| autoplay | boolean | false | 자동 슬라이드 |
| autoplaySpeed | number | 3000 | 자동 슬라이드시, 한 슬라이드에 머무르는 시간 |
| responsive | object | - | 반응형 슬라이드: 화면 넓이에 따라 레이아웃 변경(아래 예시 참고) |
| asNavFor | string | - | "슬라이드 + 썸네일 슬라이드" 형의 슬라이드 구형 |
$('.responsive').slick({
slidesToShow: 4,
slidesToScroll: 4,
responsive: [
{ breakpoint: 600, // 화면의 넓이가 600px 이상일 때
settings: {
slidesToShow: 3,
slidesToScroll: 3
}},
{ breakpoint: 320, // 화면의 넓이가 320px 이상일 때
settings: {
slidesToShow: 1,
slidesToScroll: 1
}
}
]
});slick - the last carousel you'll ever need
slick is a responsive carousel jQuery plugin that supports multiple breakpoints, CSS3 transitions, touch events/swiping & much more!
kenwheeler.github.io
4. 통합 샘플
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>slick | slide</title>
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"/>
<style>/* 임시 삽입: 확인용 */
.slick-sample{width: 100%;height: 200px;}
.slick-sample .slick-list{height: 100%;}
</style>
</head>
<body>
<div class="slick-sample">
<div>Slide 1</div>
<div>Slide 2</div>
<div>Slide 3</div>
</div>
<script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>
<script>
$(document).ready(function(){
$('.slick-sample').slick({
dots: true
});
});
</script>
</body>
</html>[slide] slick 아이템에 여백 추가하는 방법 How add spaces between Slick item
.slick-slide { margin: 0 30px; // space(여백)/2 } .slick-list { margin: 0 -30px; // space(여백)/-2 } Parameter for space between slides · Issue #582 · kenwheeler/slick I noticed that all your demo..
fresh-mint.tistory.com
반응형
'javascript > library' 카테고리의 다른 글
| [slide] slick 아이템에 여백 추가하는 방법 How add spaces between Slick item (0) | 2021.10.23 |
|---|---|
| [slide] swiper v5부터 ie 미지원! (0) | 2021.01.16 |
| [툴팁] tooltip, 쉽고 쉽게 만들기: tippy.js (0) | 2021.01.12 |
| [slide] swiper 사용법(+반응형) (1) | 2021.01.10 |
댓글