퍼블리싱/jquery
[jqeury] slick 슬라이드 사용법 & 자주 사용하는 옵션
에밀리 시하
2021. 9. 9. 14:00
반응형
slick 슬라이드는 자주 사용하는 플로그인 중에 하나이다!
pc에도 자주사용하고 mobile에도 자주 사용한다.
1. 우선 slick 파일을 다운받아서 css 파일과 js 파일을 넣어준다.
<html>
<head>
<link rel="stylesheet" type="text/css" href="slick/slick.css"/>
// Add the new slick-theme.css if you want the default styling
<link rel="stylesheet" type="text/css" href="slick/slick-theme.css"/>
//js
<script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="slick/slick.min.js"></script>
</head>
<body>
2. html 에 슬라이드 레이아웃을 코딩해준다.
<div class="slick_sd">
<div class="slick_list">your content</div>
<div class="slick_list">your content</div>
<div class="slick_list">your content</div>
</div>
3. slick 슬라이드 플로그인 js를 디자인에 맞게 옵션을 넣어서 삽입해준다.
<script type="text/javascript">
$(document).ready(function(){
$('.slick_sd').slick({
infinite: true, // 무한여부
slidesToShow: 3, // 보여질 슬라이드 갯수
slidesToScroll: 3 // 스크롤할 슬라이드 갯수
speed : 100, // 버튼 누르고 화면 뜨는데 걸리는 시간
arrows : true, // 화살표 여부
dots : true, // 페이지네이션 여부
autoplay : true, // 자동 스크롤 여부
autoplaySpeed : 10000, // 자동 스크롤 시 넘어가는데 걸리는 시간
pauseOnHover : true, // 마우스 호버하면 슬라이더 멈추는 설정
vertical : false, // 세로 방향 슬라이드 옵션
draggable : true, // 드래그 가능 여부
responsive: [ // 반응형 웹 구현 옵션
{
breakpoint: 1200, // 화면 사이즈 1200px
settings: { // 반응형시 위와 다르게 변경할 옵션 추가
slidesToShow:3
},
{
breakpoint: 768, // 화면 사이즈 768px
settings: {
slidesToShow:2
}
]
});
});
</script>
* jsFilddel에 위의 내용을 넣어두었다.
Edit fiddle - JSFiddle - Code Playground
Edit fiddle - JSFiddle - Code Playground
jsfiddle.net
** slick 공홈
slick - the last carousel you'll ever need (kenwheeler.github.io)
반응형