[Javascript] 직관적이고 유연한 슬라이더! Slick 슬라이더를 통해 갤러리를 구현해보세요.

웹 사이트에서 이미지 갤러리나 캐러셀처럼 슬라이더가 필요하다면, Slick 플러그인으로 간단하게 구현할 수 있습니다.

 

slick - the last carousel you'll ever need

더 자세한 내용은 Slick 공식 문서를 참조해 주세요.

 

Slick 플러그인 설치 및 사용법

1. Slick은 jQuery 기반 플러그인입니다. 아래 코드를 사용해 jQuery와 Slick을 설치하세요.

<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/jquery.slick/1.8.1/slick.css"/>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.slick/1.8.1/slick.min.js"></script>

 

2. 슬라이더를 표시할 HTML 구조를 작성합니다.

<div class="slider">
    <div>Slide 1</div>
    <div>Slide 2</div>
    <div>Slide 3</div>
</div>

 

3. 슬라이더를 동작하게 하려면 아래처럼 JavaScript를 작성합니다.

$(document).ready(function(){
    $('.slider').slick({
        infinite: true, //슬라이더가 무한 반복될지 여부
        slidesToShow: 3, //한 화면에 표시할 슬라이드 개수
        slidesToScroll: 1, //한번에 이동할 슬라이드 개수
        autoplay: true, //자동 재생 여부
        autoplaySpeed: 2000, //자동 재생 속도(밀리초)
        arrows: true, //화살표 네비게이션 표시 여부
        dots: true, //도트 네비게이션 표시 여부
        centerMode: true, //활성화된 슬라이드를 중앙에 배치
        variableWidth: true, //슬라이드의 너비를 콘텐츠의 크기에 따라 동적으로 조정
        fade: true, //슬라이드 전환 방식을 페이드 인/아웃 효과로 변경
        cssEase: 'linear', //라이드 전환 효과의 CSS 이징(easing) 방식을 지정
        responsive: [
        {
            breakpoint: 1024, //뷰포트가 1024px 이하일 때
            settings: {
                slidesToShow: 2, 
                slidesToScroll: 1,
            }
        },
        {
            breakpoint: 768, //뷰포트가 768px 이하일 때
            settings: {
                slidesToShow: 1, 
                slidesToScroll: 1,
            }
        },
        {
            breakpoint: 480, //뷰포트가 480px 이하일 때
            settings: {
                slidesToShow: 1,
                slidesToScroll: 1,
                dots: true, 
                arrows: false 
            }
        }
    ]
    });
});

 

 

 

Slick Slider에서 조건별로 다른 설정 적용하기

Slick Slider는 특정 클래스에 따라 슬라이더 설정을 다르게 적용하여 유연한 커스터마이징을 가능하게 하는 플러그인입니다.

 

코드 예시를 통해, 슬라이드 아이템의 개수에 따라 한 화면에 보이는 아이템 수와 정렬 방식을 다르게 설정하는 방법에 대해서 알아보겠습니다.

<ul class="list">
  <li class="item">Slide 1</li>
  <li class="item">Slide 2</li>
  <li class="item">Slide 3</li>
</ul>

<ul class="list one">
  <li class="item">Single Slide</li>
</ul>

 

 

슬라이드 아이템이 여러 개일 때는 한 화면에 2개씩 슬라이드를 표시하도록 설정합니다. 이때, 무한 스크롤 기능을 활성화하고, 좌우 화살표를 표시하여 슬라이드를 이동할 수 있게 합니다.

슬라이드 아이템이 하나일 때는 해당 슬라이드를 중앙 정렬로 표시하고, 무한 스크롤을 비활성화하고, 한 화면에 하나의 아이템만 보이도록 설정합니다.

if ( listData.length == 1) {
    $(".list").addClass("one");
} else {
    $(".list").removeClass("one");
}

$(".list").not(".one").slick({ //슬라이드 아이템이 여러 개인 슬라이더 초기화 (one 클래스를 제외)
  dots: false,
  arrows: true,
  variableWidth: true,
  infinite: true,
  slidesToShow: 2,
  slidesToScroll: 1,
});

$(".list.one").slick({ //슬라이드 아이템이 하나인 슬라이더 (one 클래스가 있는 경우) 초기화
  centerMode: true,
  centerPadding: '0px',
  dots: false,
  arrows: true,
  variableWidth: true,
  infinite: false,
  slidesToShow: 1,
  slidesToScroll: 1,
});

 

 

Slick 슬라이더는 다양한 기능과 높은 유연성으로 반응형 슬라이더를 쉽게 구현할 수 있는 강력한 플러그인입니다. 무한 스크롤, 페이드 전환, 가변 너비, 중앙 정렬 등 다양한 옵션을 지원하여 디자인 요구에 유연하게 대응합니다. 또 responsive 옵션을 통해 화면 크기에 따라 설정을 동적으로 변경할 수 있어 모바일 친화적인 슬라이더 구현이 가능합니다. 주요 브라우저와 모바일 환경에서 안정적으로 작동하며, CSS와 JavaScript를 활용한 커스터마이징도 용이합니다. 직관적이고 유연한 슬라이더! Slick 슬라이더를 통해 갤러리를 구현해 보세요.

 

 

 

[Git] GitHub에서 Squash Merge로 프로젝트 히스토리 깔끔하게 정리하기

 

[Utility] 이미지 추출 기준이란? (feat. Figma를 활용한 이미지 추출 방법)

 

 

[SCSS] 자연스러운 전환을 위한 Overlay 팝업의 Dim 영역 처리

 

[AI] 클로바 더빙(CLOVA Dubbing으로 전문가처럼 더빙하기 : 초보자 튜토리얼

 

유용한 터미널 명령어