본문 바로가기
Web 개발/Plugin&Library

Slick.js [3] : HTML 구조 & CSS 적용 - 슬라이드 jQuery 라이브러리

IT_마스터 2025. 2. 21. 08:53
  • Slick.js 소개
  • Slick.js 작성 환경
  • Slick.js의 HTML 구조
  • 데모 화면
목표
Slick.js를 사용하면 자동으로 특정 HTML 구조가 생성된다. 이때 생성되는 요소의 클래스명을 활용하여 CSS 스타일을 적용할 수 있다. Slick.js 사용시 생성되는 HTML 구조를 살펴보자

# Slick.js 소개

 

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

  • 제이쿼리 기반 슬라이더(캐러셀) 라이브러리
  • jQuery 플러그인으로 선언 전 jQuery가 연결되어 있어야 한다
  • 터치, 스와이프, 자동 재생, 반응형 등 다양한 옵션을 사용 가능하다

# Slick.js 작성 환경

CDN 연결

<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<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>

 

[HTML] HTML 구조

  • slick 내부에서 div구조를 기본으로 사용하기 때문에 ul, li 보다 div 태그를 이용하는 것이 좋지만, 가독성을 위하여 ul, li로 작성
<ul class="클래스명">
  <li>슬라이드 1</li><li>슬라이드 2</li><li>슬라이드 3</li><li>슬라이드 4</li><li>슬라이드 5</li>
</ul>

 

[JS] Slick 초기화

$(function(){
  $('.클래스명').slick({
    dots:true,
    slidesToShow : 2,
    slidesToScroll : 2,
  });
})

# Slick.js의 HTML 구조

  • 상단처럼 작성시 생성되는 Slick HTML 구조
  • 이해를 돕기 위해 일부 요소 및 클래스명을 삭제함
<ul class="클래스명 slick-slider"> <!-- (사용자 지정) 슬라이더 최상위 컨테이너 -->

  <button class="slick-prev slick-arrow"> <!-- 이전 화살표 -->
    Previous
  </button>

  <div class="slick-list"> <!-- 슬라이더 영역 -->
    <div class="slick-track"> <!-- 슬라이드 컨테이너 -->
      <!-- (사용자 지정)  현재 및 활성화된 슬라이드 -->
      <li class="slick-slide slick-active slick-current"> 슬라이드 1</li> 
      <li class="slick-slide slick-active">슬라이드 2</li>
      <li class="slick-slide">슬라이드 3</li>
      <li class="slick-slide">슬라이드 4</li>
      <li class="slick-slide">슬라이드 5</li>
    </div>
  </div>

  <button class="slick-next slick-arrow"> <!-- 다음 화살표 -->
    Next
  </button>  

  <ul class="slick-dots"> <!-- 인디케이터 컨테이너 -->
    <li class="slick-active">1</li> <!-- 현재 및 활성화 인디케이터 -->
    <li>2</li>
    <li>3</li>
  </ul>

</ul>

 

(지정요소).slick-slider
역할 - (사용자 지정) Slick 슬라이더 최상위 컨테이너
- 사용자가 작성한 클래스명이 추가
위치 (최상위) .slick-slider
CSS 슬라이더를 전체를 감싸고 있음
button.slick-arrow
역할 좌우 네비게이션(화살표) 버튼 공통
위치 .slick-slider > button.slick-arrow 
CSS .slick-prev, .slick-next의 공통
분류 .slick-prev 역할 이전 버튼 (.slick-prev 클래스명이 추가)
위치 .slick-slider > button.slick-arrow.slick-prev
.slick-next 역할 다음 버튼 (.slick-next 클래스명이 추가)
위치 .slick-slider > button.slick-arrow.slick-next
div.slick-list
역할 보이는 영역(뷰포트) 역할
위치 .slick-slider > div.slick-list
CSS { overflow:hidden; }
div.slick-track
역할 슬라이드들을 감싸고 움직이는 역할
위치 .slick-slider > div.slick-list > div.slick-track
CSS { transform: translate3d(); } 로 슬라이드 이동
(지정요소).slick-slide
역할 (사용자 지정) 개별 슬라이드 요소
위치 .slick-slider > div.slick-list > div.slick-track > .slick-slide
분류 .slick-current 역할 현재 위치 슬라이드 (. slick-current 클래스명이 추가)
위치 .slick-slider > div.slick-list > div.slick-track > .slick-slide.slick-current
.slick-active 역할 활성화 슬라이드(. slick-active클래스명이 추가)
- slick-list 영역에서 보이는 슬라이드
위치 .slick-slider > div.slick-list > div.slick-track > .slick-slide.slick-active
ul.slick-dots
역할 슬라이더 인디케이터 버튼들의 컨테이너 (ul 요소)
위치 .slick-slider > ul.slick-dots
기타 - 옵션 { dots:true } 사용 시 .slick-slider 내부에 자동으로 생성됨과 동시에 .slick-slider에 .slick-dotted 클래스가 추가됨
- 인디케이터 버튼들은 <li> 태그로 구성
ul.slick-dots li
역할 슬라이더 인디케이터 버튼들, 슬라이드 페이지 표시
분류 li.slick-active 역할 활성화 인디케이터 ( .slick-active 클래스명 추가)
위치 .slick-slider > ul.slick-dots > li.slick-active

# 데모 화면

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Slick 데모 2</title>
  <!-- Font Awesome CDN -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css" integrity="sha512-Evv84Mr4kqVGRNSgIGL/F/aIDqQb7xQ2vcrdIwxfjThSH8CSR7PBEakCr51Ck+w+/U6swU2Im1vVX0SVk9ABhg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
  <!-- Slick CDN -->
  <script src="https://code.jquery.com/jquery-3.6.0.js"></script>
  <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>
 <style>
  /* reset.css */
  *{margin: 0; padding: 0;}
  ul li{list-style-type:none;}
  /* layout.css */
  section{width: 100%; max-width: 600px; margin: 0 auto; padding-top: 32px;}
  section h2 {padding-bottom: 8px; border-bottom: 4px double #000;}
  section .description{ display: flex; padding: 12px; background-color:aliceblue;} 
  section .description ul.txt{ width: 30%; transform: translateX(20px);}
  section .description ul.txt li{list-style-type: circle; font-size: .8em;}
  section .description .code {padding: 8px 16px; flex: 1; background-color: #fff; border-radius: 4px;}
  section .slick-slider{margin-top: 8px;  padding: 16px; border-radius: 4px;}
  /* Slick CSS */
  .s1 .my-slider1{ background-color: #d8d8d8;}
  .s1 .my-slider1 .slick-list{ position: relative;}
  .s1 .my-slider1 .slick-list .slick-slide{ margin: 4px; border-radius: 8px; overflow: hidden; box-sizing: border-box; }
  .s1 .my-slider1 .slick-list .slick-slide img{ width: 100%; display: block; }
  .s1 .my-slider1 button{border: 0;}
  /* 화살표 */
  .s1 .my-slider1 .slick-arrow {display: block; width: 50px; height: 50px; background-color: rgba(0,0,0,.3); position: absolute; z-index: 1; top:50%; transform: translateY(-50%); cursor: pointer; transition: all .3s;}
  .s1 .my-slider1 .slick-arrow:hover{background-color: rgba(0,0,0,.8);}
  .s1 .my-slider1 .slick-arrow.slick-prev{ left:0;}
  .s1 .my-slider1 .slick-arrow.slick-next{ right:0;}
  .s1 .my-slider1 .slick-arrow i{color: #fff; font-size: 24px;}
  /* 인디케이터 */
  .s1 .my-slider1 .slick-dots{ position: absolute; display: flex; gap:8px; bottom:20px; left:50%; transform: translateX(-50%); }
  .s1 .my-slider1 .slick-dots li button{width: 14px; height: 14px; background-color: rgba(0,0,0,.3); text-indent: -1000px; overflow: hidden; border-radius: 50%; cursor: pointer; transition: all .3s;}
  .s1 .my-slider1 .slick-dots li button:hover{background-color: rgba(0,0,0,.8); text-indent: -1000px; border-radius: 50%; cursor: pointer;}
  .s1 .my-slider1 .slick-dots li.slick-active button{background-color: rgba(0,0,0,.8);}
 </style>
</head>
<body>
<section class="s1">
  <h2>Slick 슬라이드 기본 - CSS 설정</h2>
  <div class="description">
    <ul class="txt">
      <li>CSS 설정</li>
    </ul>
    <div class="code">
<pre>
$('.my-slider1').slick({
  dots:true,
  slidesToShow : 2,
  slidesToScroll : 2,
});</pre>
    </div>
  </div>
  <div class="my-slider1">
    <div><img src="http://placehold.co/180x160/orange/ffffff?text=Slide-1" alt="더미 이미지"></div>
    <div><img src="http://placehold.co/300x250/darkcyan/ffffff?text=Slide-2" alt="더미 이미지"></div>
    <div><img src="http://placehold.co/300x200/skyblue/ffffff?text=Slide-3" alt="더미 이미지"></div>
    <div><img src="http://placehold.co/180x190/crimson/ffffff?text=Slide-4" alt="더미 이미지"></div>
    <div><img src="http://placehold.co/260x130/plum/ffffff?text=Slide-5" alt="더미 이미지"></div>
  </div>
</section>
<script>
$(function(){
  $('.my-slider1').slick({
    dots:true,
    slidesToShow : 2,
    slidesToScroll : 2,
  });
  $('.s1 .my-slider1 .slick-arrow.slick-prev').html('<i class="fa-solid fa-arrow-left"></i>')
  $('.s1 .my-slider1 .slick-arrow.slick-next').html('<i class="fa-solid fa-arrow-right"></i>')
})
</script>
</body>
</html>

'Web 개발 > Plugin&Library' 카테고리의 다른 글

Flatpickr [1] - 날짜&시간 선택 JS 라이브러리  (0) 2025.02.28
Slick.js [이슈] : 반응형 좌우 배치 레이아웃 관련  (0) 2025.02.26
Slick.js [2] : 옵션 정리- 슬라이드 jQuery 라이브러리  (0) 2025.02.20
Slick.js [1] - 슬라이드 jQuery 라이브러리  (0) 2025.02.19
Scrolla.js [3] : Splitting.js 을 활용하여 개별 텍스트에 애니메이션 주기  (0) 2025.02.18

'Web 개발/Plugin&Library' Related Articles

티스토리툴바