반응형
홈페이지를 만들다보면 슬라이드 기능을 자주 사용하는데요.
이때 사용하기 좋은 슬라이더 라이브러리인 slick slider를 알아보겠습니다.
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
1. 설치(CDN)
<head>
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"/>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript" src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>
</head>홈페이지에서 다운로드받거나, cdn을 사용해주시면 됩니다.
cdn 주소는 head에 넣어주시고 jquery와 함께 사용해주셔야 합니다!
[html]
<div class="slick">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
[CSS]
div{height: 100px;background: yellow}
/*이전,다음*/
.slick-arrow{position: absolute;top: 50%;transform: translateY(-50%);z-index: 5}
.slick-prev{left: 0;}
.slick-next{right: 0;}
[js]
$('.slick').slick();
[완료화면]
[예제]
1. 멀티 아이템
$('.multiple-items').slick({
infinite: true,
slidesToShow: 3,
slidesToScroll: 3
});
2. 반응형 슬라이드
$('.responsive').slick({
dots: true,
infinite: false,
speed: 300,
slidesToShow: 4,
slidesToScroll: 4,
responsive: [
{
breakpoint: 1024,
settings: {
slidesToShow: 3,
slidesToScroll: 3,
infinite: true,
dots: true
}
},
{
breakpoint: 600,
settings: {
slidesToShow: 2,
slidesToScroll: 2
}
},
{
breakpoint: 480,
settings: {
slidesToShow: 1,
slidesToScroll: 1
}
}
// You can unslick at a given breakpoint now by adding:
// settings: "unslick"
// instead of a settings object
]
});
[slick slider 옵션]
$(function(){
$('.slider-wrap').slick({
slide: 'div', //슬라이드될 태그
infinite : true, //무한 반복 옵션
slidesToShow : 2, // 한 화면에 보여질 컨텐츠 개수
slidesToScroll : 1, //스크롤 한번에 움직일 컨텐츠 개수
speed : 500, // 다음 버튼 누르고 다음 화면 뜨는데까지 걸리는 시간(ms)
arrows : true, // 옆으로 이동하는 화살표 표시 여부
dots : true, // 스크롤바 아래 점으로 페이지네이션 여부
autoplay : true, // 자동 스크롤 사용 여부
autoplaySpeed : 2000, // 자동 스크롤 시 다음으로 넘어가는데 걸리는 시간 (ms)
pauseOnHover : true, // 슬라이드 이동 시 마우스 호버하면 슬라이더 정지
vertical : false, // 세로 방향 슬라이드 옵션
prevArrow : "<button type='button' class='slick-prev'>Previous</button>",
nextArrow : "<button type='button' class='slick-next'>Next</button>",
draggable : true, //드래그 가능 여부
responsive: [ // 반응형 웹 구현
{
breakpoint: 960, //화면 사이즈
settings: {
slidesToShow: 4
}
},
{
breakpoint: 768, //화면 사이즈
settings: {
slidesToShow: 5
}
}
]
});
})반응형
'Web > jquery' 카테고리의 다른 글
| [jquery] 제이쿼리 cdn, 최신버전 사용하기 (0) | 2023.03.13 |
|---|---|
| [Jquery] 더보기버튼 리스트 노출 (0) | 2023.03.10 |
| 간단한 스크롤 애니메이션 aos.js (0) | 2023.03.10 |
| 스크롤 애니메이션 wow.js 사용법 (0) | 2023.02.08 |
| [jquery] 스크롤 내리면 상단고정, 스타일 변경되는 메뉴 (7) | 2022.08.30 |