728x90
Slick Slider란 ?
Slick Slider는 JQuery 기반으로, 슬라이더를 구현하기 쉽게 해주는 플러그인이다.
공식 페이지는 다음과 같다. Slick Slider 공식페이지
뮤지컬 관련 프로젝트를 하면서, 사용자에게 뮤지컬을 추천해주는 서비스를 만들었는데, 서비스를 제공하는 화면을 Netflix처럼 슬라이더를 사용해보면 좋을 것 같다는 생각에 슬라이더를 구현하는 방법을 찾아보게되었고, 사용방법이 비교적 간단하고 테스트해봤을때 매끄럽게 잘 돌아가서 Slick Slider를 사용했다.
사용법
라이브러리 연결
CDN을 이용해서 slick.css, slick-theme.css, slick.min.js, jQuery를 연결한다.
다음의 코드를 HTML에 넣어줍니다. 로딩속도를 위해서 <link>는 <head>안에, <script>는 <body>끝 부분에 넣기.
<!-- 이부분은 <head> 안에 넣어주세요-->
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"/>
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick-theme.css"/>
<!-- 이부분은 <body> 끝부분에 넣어주세요-->
<script src="//code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>slick 버전은 JQuery 버전에 따라서 맞춰줘야한다. 공식사이트 참고.(JQuery 1을 쓰거나 할 경우)
HTML 예시
<div class="my-slider"> <!-- js에서 이 클래스명을 이용해 동작한다. 클래스명 변경가능 -->
<div><img src="img1" alt=""></div> <!-- 위 요소들을 가지고 슬라이드를 구현한다 -->
<div><img src="img2" alt=""></div>
<div><img src="img3" alt=""></div>
<div><img src="img4" alt=""></div>
<div><img src="img5" alt=""></div>
<div><img src="img6" alt=""></div>
</div>
JS 예시
// default는, 적지않았을때 자동으로 설정되는 값을 말한다.
// 디자인이 맘에 들지않을 경우, 크롬 개발자도구 같은 것을 사용해 셀렉터를 찾고
// CSS를 수정해서 커스터마이즈하면 된다.
$('.my-slider').slick({ // 사용할 클래스
rows: 1, // 이미지를 몇줄로, 1이면 한줄로 표시
dots: false, // true면 슬라이더아래에 네비 dots 표시 default=false
appendDots: $('selector'), // 네비게이션을 만들었다면 이것을 통해서 추가 가능
dotsClass: 'custom-dots', // 네비버튼의 클래스 바꾼다.
infinite: true, // 무한스크롤 default=true
slidesToShow: 4, // 한 슬라이드에 보여줄 개수
slidesToScroll: 4, // 이전,다음 버튼 클릭시 넘어가는 슬라이드 수
slidesPerRow: 1, // 보여질 행의 수
autoplay: true, // 자동슬라이드 default=false
autoplaySpeed: 2000, // 자동슬라이드시간(500ms = 0.5초)
variableWidth: true, // 사진마다 width의 크기가 다르면 true설정 default=false
draggable: false, // 드래그 가능 default=true
arrows: true, // 이전다음 버튼 표시 default=true
pauseOnFocus: true, // 클릭 시 슬라이드 멈춤 default=true
pauseOnHover: true, // 마우스 오버 시 슬라이드 멈춤 default=true
pauseOnDotsHover: true, // 네비버튼 오버 시 슬라이드 멈춤 default=false
vertical: true, // 세로 방향인지 default=false
verticalSwiping: true, // 세로 스와이프 default=false
accessibility: true, // 접근성 여부 default=false
appendArrows: $('#arrows'), // 좌우 화살표 변경
prevArrow: $('#prevArrow'), // 이전 화살표만 변경
nextArrow: $('#nextArrow'), // 다음 화살표만 변경
initialSlide: 1, // 처음 보여질 슬라이드 번호 default=0
centerMode: true, // 중앙에 슬라이드가 보여지는 모드 default=false
centerPadding: '70px', // 중앙 슬라이드 좌우패딩(중앙모드시)
fade: true, // cross fade 모션 default=falsee
speed: 2000, // 슬라이드 넘어가는 시간
waitForAnimate: true, // 슬라이드 중 동작제한 default=true
responsive: [ // 반응형 breakpoint
{
breakpoint: 1024, // 해상도 1024 일때
settings: {
slidesToShow: 3, // 이 안에 설정된 값들이 위의 설정된 값에서 바뀜
slidesToScroll: 3,
}
},
{
breakpoint: 768, // 해상도 768 일때
settings: {
slidesToShow: 2,
slidesToScroll: 2
}
},
{
breakpoint: 480, // 해상도 480 일때
settings: {
slidesToShow: 1,
slidesToScroll: 1
}
}
]
});CSS를 건드리지않는다면, 공식사이트에 나온 것처럼 기본테마가 설정되어있다.
CSS를 수정해서 디자인을 바꾸거나, 자기가 직접 HTML을 만들어서 셀렉터를 통해서 등록시켜서 커스텀할 수 있다.
'웹 (Web)' 카테고리의 다른 글
| 쿠키(Cookie)와 세션(Session) (0) | 2023.11.17 |
|---|---|
| 로그인 기능 구현 - 로그인 인증방법 정리 (0) | 2023.11.17 |
| 다양한 방법으로 배포하기 (0) | 2023.10.23 |
| Brackets Plugin (0) | 2023.10.22 |
| Python 환경설정 (0) | 2023.10.18 |
