slick는 슬라이드를 사용할 수 있게 제이쿼리기반의 라이브러리이다. 반응형 작업할때 breakpoint만 설정해주면 쉽게 변경이 가능하고 그 외에도 드래그 등 여러가지 기능을 간편하게 사용할 수 있게 제공해주고 있다. 하지만 swipe와 다르게 조금 사용법이 명확하게 홈페이지에 나와있지 않아 이곳에 정리해보고자 한다.
01. JQuery CDN 가져오기
slick은 제이쿼리 기반의 라이브러리이기 때문에 제이쿼리 CDN이 1차적으로 필요하다.
jQuery
What is jQuery? jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers.
jquery.com
[ 01 ] 위의 사이트를 들어가면 제일 처음 보이게 되는 제이쿼리 메인페이지이다. 노랑색버튼 Download jQuery를 클릭해서 들어가자.
[ 02 ] 다운로드를 할 수 있는 링크들이 제일 먼저 보이게 되는데 CDN을 가져올 것이기 때문에 Other CDNs라고 적혀있는 부분으로 오자. Google CDN, Microsoft CDN 등 다양한 링크들이 존재하고 여기서 원하는 곳에서 가져와도 되지만 익숙한 CDNJS CDN을 갖고 오겠다.
[ 03 ] 여러가지 링크들이 나오는데 .min.js로 압축되어져있는 링크를 가져올 것이다.
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
[ 04 ] 최종적으로 위의 코드가 head에 영역에 일차적으로 들어간다.
02. Slick CDN or Download
https://kenwheeler.github.io/slick/
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
[ 01 ] 이젠 slick에 들어가서 CDN을 가져와보자.
제이쿼리도 그렇고 slick도 그렇고 인터넷이 연결되어진 상태라면 파일을 다운받지 않고도 사용할 수 있는 CDN 방식과 직접적인 코드파일을 다운받아 링크를 거는 방식을 지원하고 있다.
[ 02 ] 위의 slick 사이트로 들어가면 제일 먼저 보여지는 메인페이지다. slick 로고 아래에 보이는 상단의 메뉴들 중에서 get it now를 클릭하면 CDN 링크와 파일을 다운받을 수 있는 파일섹션으로 점프된다.
[ 03 ] slick 홈페이지에서 제공해주고 있는 CDN을 그냥 들고와서 연결을 하면 제대로 작동하지 않는 다는 문제점이 있다. 아래 [ 03 - 01 ]에서 다루고 있는 수정된 CDN을 넣어야지 실제적으로 작동한다.
[ 03 - 01 ] CDN으로 연결하기
<!-- slick 홈페이지에서 제공해주고 있는 CDN, 하지만 작동하지 않는 문제점이 발생하고 있다. -->
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"/>
<script type="text/javascript" src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>
CDN not working · Issue #3322 · kenwheeler/slick · GitHub
CDN not working · Issue #3322 · kenwheeler/slick
Hi, Your CDN link for 1.8.0 is not working any more. Please can you provide a new one?
github.com
나말고도 많은 사람들이 slick CDN이 제대로 작동하지 않다는 것을 거론하고 있었고 위의 홈페이지에서 제공해주는 CDN에서 앞의 //를 https://로 수정하는 걸로 해결책을 내놓고 있다.
<!-- https://를 추가하여 수정한 slick CDN 코드 -->
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.css"/>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick-theme.min.css"/>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js" defer></script>
slick JS CDN을 연결할 때에도 한가지 중요한 것은 꼭 'defer'를 적어줄 것! 그게 싫다면 body가장 아래에 script링크를 걸거나 해야한다. 아니면 아래의 body내용의 html을 읽어내려가기 전에 이미 script파일을 전부 읽어버리기 때문에 제대로 작동하지 않는 문제점이 또 발생한다.
[ 03 - 02 ] Download 파일로 연결하기
다운로드 버튼을 누르면 나오는 파일 안의 모습이다. slick-theme.css, slick.css를 css가 있는 폴더에 넣어 링크로 걸고 slick.js는 js폴더에 넣어 링크를 걸어주면 된다. (여기서도 js에는 꼭 defer를 적어줄 것)
03. HTML, CSS slide 만들기
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- https://를 추가하여 수정한 slick CDN 코드 -->
<!-- <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.css"/>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js" defer></script> -->
<!-- 직접적으로 연결한 slick -->
<script src="./slick.js" defer></script>
<link rel="stylesheet" href="./slick.css">
<link rel="stylesheet" href="./slick-theme.css">
<!-- JQuery CDN -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<title>slick을 설정해보자</title>
<style>
.slideContainer{
width: 800px;
height: 350px;
background-color: antiquewhite;
margin: 100px auto;
display: flex;
}
.item{
width: 350px;
height: 350px;
display: flex;
justify-content: center;
align-items: center;
font-weight: 600;
font-size: 30px;
}
.item01{background-color: red;}
.item02{background-color: orange;}
.item03{background-color: yellow;}
.item04{background-color: green;}
.item05{background-color: blue;}
.item06{background-color: blueviolet;}
</style>
</head>
<body>
<div class="slideContainer">
<div class="item item01">1</div>
<div class="item item02">2</div>
<div class="item item03">3</div>
<div class="item item04">4</div>
<div class="item item05">5</div>
<div class="item item06">6</div>
</div>
<script>
</script>
</body>
</html>
대충 이정도의 값만 주었다. overflow:hidden; 과 같은 값을 주지 않아도 스크립트에서 slick이 제대로 연결이 되면 알아서 정리를 해주기 때문에 굳이 값들을 CSS에서 변경하지 않아도 된다. (현재 flex에 의해서 안의 요소들의 width값이 무시되고 모두 들어가 있지만 slick을 연결하면 해결될 문제이기 때문에 신경쓰지 말자)
03. script 설정하기
다시 slick 홈페이지로 돌아가면 다양한 샘플들을 제공해주고 있다. 제대로 변화되고 있는지 확인하기 위해서 autoslide의 코드를 들고 오겠다. 여기서 swiper의 slide 사용법과 조금 다른 slick때문에 적용이 안된다고 생각할 수 있는데 홈페이지에서 제공해주는 demo의 sample들을 마냥 가져와서는 안되고 아래의 코드 안에 적용시켜 줘야한다.
$(document).ready(function() {
})
이제 위의 샘플로 제공해주고 있는 autoplay slide의 코드를 복사해서 아래와 같이 넣어주자.
$(document).ready(function () {
$('.autoplay').slick({
slidesToShow: 3, // 3개의 슬라이들 보여주겠다
slidesToScroll: 1, // 하나씩 슬라이드가 넘어가도록 하겠다.
autoplay: true, // 자동 슬라이드 여부
autoplaySpeed: 2000, // 자동 슬라이드 속도
});
})
그러면 이런식으로 코드가 완성될 것이다.
최종적으로 .autoplay라고 되어 있는 부분을 수정해주면 된다. 슬라이드가 구현되고자 하는 container의 class명이나 id명을 넣어주면 slick slide가 적용이 될 것이다.
최종적인 코드는 아래와 같다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- https://를 추가하여 수정한 slick CDN 코드 -->
<!-- <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.css"/>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js" defer></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick-theme.min.css"/> -->
<!-- 직접적으로 연결한 slick -->
<script src="./slick.js" defer></script>
<link rel="stylesheet" href="./slick.css">
<link rel="stylesheet" href="./slick-theme.css">
<!-- JQuery CDN -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<title>slick을 설정해보자</title>
<style>
.slideContainer {
width: 800px;
height: 350px;
background-color: antiquewhite;
margin: 100px auto;
display: flex;
}
.item {
width: 350px;
height: 350px;
display: flex;
justify-content: center;
align-items: center;
font-weight: 600;
font-size: 30px;
}
.item01{background-color: red;}
.item02{background-color: orange;}
.item03{background-color: yellow;}
.item04{background-color: green;}
.item05{background-color: blue;}
.item06{background-color: blueviolet;}
</style>
</head>
<body>
<div class="slideContainer">
<div class="item item01">1</div>
<div class="item item02">2</div>
<div class="item item03">3</div>
<div class="item item04">4</div>
<div class="item item05">5</div>
<div class="item item06">6</div>
</div>
<script>
$(document).ready(function () {
$('.slideContainer').slick({
slidesToShow: 3, // 3개의 슬라이들 보여주겠다
slidesToScroll: 1, // 하나씩 슬라이드가 넘어가도록 하겠다.
autoplay: true, // 자동 슬라이드 여부
autoplaySpeed: 2000, // 자동 슬라이드 속도
});
})
</script>
</body>
</html>
위의 옵션들을 추가하거나 삭제하여 원하는 형태로 수정이 가능하다. 또한, 이미 theme.css가 링크로 걸려있어 슬라이드 버튼(prev, next)이나 페이저들이 보이지 않지만 이것 또한 개발자도구를 통해서 class명들을 확인 후에 고칠 수 있다. 이것들은 추후에 업로드하도록 하겠다.
