728x90
Slick Slider란 무엇인가요?
반응형 웹사이트에 이미지 또는 비디오를 슬라이드 형태로 보여주는 javascript 플러그인입니다.
설치하기
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
Slick Slider는 CDN을 통해 쉽게 설치할 수 있습니다.
<head> 태그 안에 Slick CSS 파일과 jQuery, Slick JavaScript 파일을 추가하세요.
옵션 설정:
Slick Slider는 다양한 옵션을 제공합니다.
이를 통해 슬라이드의 동작, 디자인 및 사용자 경험을 커스터마이징할 수 있습니다.
몇 가지 중요한 옵션으로는 autoplay, arrows, dots 등이 있습니다.
$('.slider-items').slick({
rows: 1, //슬라이드에 새로 줄 설정
dots: false, //슬라이더에 도트 네비게이션 버튼 표시 여부(true / false)
appendDots: $('selector'), //네비게이션 버튼 설정
dotsClass: 'custom-dots', //네비게이션 버튼 클래스 설정
infinite: true, //무한 재생(true / false)
slidesToShow: 4, //화면에 보여 슬라이드 개수
slidesToScroll: 4, //스크롤 시 넘어가는 슬라이드의 개수
slidesPerRow: 1, //슬라이드 행의 개수
autoplay: true, //슬라이드 자동 재생 (true / false)
autoplaySpeed: 2000, //슬라이드 자동으로 넘어가는 시간 (1000 = 1s)
variableWidth: true, //사진마다 크기가 다른 설정(true / false)
draggable: false, //슬라이드 드래그 여부 (true / false)
arrows: true, //이전 다음 버튼 활성화 (true / false)
pauseOnFocus: true, //마우스 클릭 시 슬라이드 재생 멈춤
pauseOnHover: true, //마우스 호버 시 슬라이드 재생 멈춤
pauseOnDotsHover: true, //도트 네비게이션 호버 시 슬라이드 재생 멈춤
vertical: true, //세로 방향 설정 (true / false)
verticalSwiping: true, //세로 방향 스와이프 설정 (true / false)
accessibility: true, //접근성 여부(true / false)
appendArrows: $('#arrows'), //이전 다음 버튼 설정
prevArrow: $('#prevArrow'), //이전 버튼만 변경
nextArrow: $('#nextArrow'), //다음 버튼만 변경
initialSlide: 1, //처음으로 보여지는 슬라이드 순서
centerMode: true, //중앙에 슬라이드가 보여지는 모드
centerPadding: '70px', //중앙에 슬라이드가 보여지는 모드 패딩 값
fade: true, //크로스페이드 모션 사용 설정
speed: 2000, //넘어가는 속도 (1000 = 1s)
waitForAnimate: true, //애니메이션 중 동작제어 설정
// 반응형 설정
// 브레이크 포인트는 화면너비에 따른 설정을 의미합니다.
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
}
}
]
});728x90
반응형
'Dev Lab > 디자인 노트' 카테고리의 다른 글
| 모바일 UI · UX 디자인 가이드 (1) | 2024.11.08 |
|---|---|
| 2024년 UI/UX 트렌드 (2) | 2024.04.18 |
| ICO 파일 변환하는 방법 (0) | 2024.04.07 |
