캐러셀 중 개인적으로도 선호하는 라이브러리인 slick 사용법에 대해 알아보았다.
1. slick 파일 다운로드 및 적용
다운로드는 https://kenwheeler.github.io/slick/ 에서 "git it now" 클릭 후
⏬
코드 예시
<head>
<title> Slick carousel </title>
<!-- 1. <head>안에 slick css 작성 -->
<link rel="stylesheet" type="text/css" href="slick/slick.css"/>
<link rel="stylesheet" type="text/css" href="slick/slick-theme.css"/>
</head>
<body>
<!-- 2. 마크업 -->
<div class="carousel">
<div>your content</div>
<div>your content</div>
<div>your content</div>
</div>
<!-- 3. js파일 -->
<script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script type="text/javascript" src="slick/slick.min.js"></script>
<!-- 4. 스크립트 작성 -->
<script type="text/javascript">
$(document).ready(function(){
$( '.carousel' ).slick({
setting-name: setting-value
});
});
</script>
</body>
※ slick 캐러셀은 jQuery기반 라이브러리로 jquery 파일이 필수다.
2. 기본 사용법
/* 1개만 보여주는 경우 */
$( '.single-item' ).slick();
/* 여러개 보여주는 경우 */
$( '.multiple-items' ).slick({
infinite: true,
slidesToShow: 3,
slidesToScroll: 3
});
3. 자주 사용하는 옵션
/* fade효과 */
$( '.carousel.fade' ).slick({
dots: true,
infinite: true,
speed: 500,
fade: true,
cssEase: 'linear'
});/* 높이값 자동맞춤 */
$( '.carousel.adaptiveHeight' ).slick({
dots: true,
infinite: true,
speed: 300,
slidesToShow: 1,
adaptiveHeight: true
});/* 센터모드 */
$( '.carousel.center' ).slick({
centerMode: true,
centerPadding: '60px',
slidesToShow: 3,
responsive: [
{
breakpoint: 768,
settings: {
arrows: false,
centerMode: true,
centerPadding: '40px',
slidesToShow: 3
}
},
{
breakpoint: 480,
settings: {
arrows: false,
centerMode: true,
centerPadding: '40px',
slidesToShow: 1
}
}
]
});/* 자동 넘김 */
$( '.carousel.autoplay' ).slick({
slidesToShow: 3,
slidesToScroll: 1,
autoplay: true,
autoplaySpeed: 2000,
});/* 캐러셀 동기화 (ex. 이미지 갤러리) */
$( '.carousel.slider-for' ).slick({
slidesToShow: 1,
slidesToScroll: 1,
arrows: false,
fade: true,
asNavFor: '.slider-nav'
});
$( '.carousel.slider-nav' ).slick({
slidesToShow: 3,
slidesToScroll: 1,
asNavFor: '.slider-for',
dots: true,
centerMode: true,
focusOnSelect: true
});/* slick 해제 */
$( '.carousel' ).slick( 'unslick' );/* 시작 */
$( '.carousel' ).slick( 'slickPause' );
/* 정지 */
$( '.carousel' ).slick( 'slickPlay' );/* 특정 슬라이드 페이지로 가기 : slick( 'goTo', index ) */
$( '.slick' ).slick( 'goTo', 0 );
퍼포먼스에서 살짝 아쉬운 부분도 있으나
원하는 디자인을 원하는 디바이스에 쉽고 빠르게 적용 가능하다는 점에서
큰 점수를 주고 싶은 slick이다.
728x90
반응형
'WWWEB > Script' 카테고리의 다른 글
| [ js ] defer vs async (0) | 2023.04.25 |
|---|---|
| [ js ] 크로스도메인에서 iframe 높이값 자동 처리하기 (0) | 2023.03.02 |
| javascript로 style 삭제 방법 (0) | 2023.01.02 |
| [자바스크립트] Keycode 이벤트 코드값 (1) | 2022.12.28 |
| [js] 시크릿 모드 체크하기 예시 (0) | 2022.12.22 |
| [js] substr() 사용은 그만. (0) | 2022.12.20 |
| 절대 좌표/상대 좌표 구하기 (0) | 2022.08.09 |
| 모던자바스크립트 핵심 가이드 pdf (complete guide to modern javascript) (0) | 2022.05.25 |
댓글