FRONTEND / UI LIBRARY

✨ Slick Carousel 활용: 중앙 슬라이드 강조 효과 (Center Mode Scale)

jQuery Slick Carousel의 Center Mode를 활용하여 현재 중앙 슬라이드는 크게, 양옆의 슬라이드는 작게 축소(Scale Down)하여 강조하는 모던한 UI 구현 방법을 알아봅니다.

📑 목차

• 1. 필수 라이브러리 및 기본 HTML 구성
• 2. Slick Carousel 초기화 옵션 (Center Mode)
• 3. CSS 핵심: 축소(Scale) 및 Z-index 계층 제어
• 4. 마무리: 동적 UI의 핵심

1. 필수 라이브러리 및 기본 HTML 구성

이 효과를 구현하기 위해서는 jQuery와 Slick Carousel 라이브러리가 필요합니다. CDN을 통해 빠르게 로드하고 기본 HTML 구조를 잡습니다.

<!-- jQuery & Slick 라이브러리 로드 -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="http://cdn.jsdelivr.net/jquery.slick/1.5.5/slick.css" rel="stylesheet" />
<script src="http://cdn.jsdelivr.net/jquery.slick/1.5.5/slick.min.js"></script>

<!-- 캐러셀 컨테이너 -->
<div class="content">
    <div class="center">
        <div><div class="slide">Slide 1</div></div>
        <div><div class="slide">Slide 2</div></div>
        <div><div class="slide">Slide 3</div></div>
        <div><div class="slide">Slide 4</div></div>
        <div><div class="slide">Slide 5</div></div>
    </div>
</div>

2. Slick Carousel 초기화 옵션 (Center Mode)

핵심 효과를 구현하기 위해 `centerMode`, `centerPadding`, `slidesToShow` 옵션을 설정합니다.

$(document).ready(function(){
    $('.center').slick({
        arrows: false,          // 좌우 이동 화살표 숨김
        centerMode: true,       // 중앙 모드 활성화 (핵심)
        infinite: true,         // 무한 루프
        centerPadding: '300px', // 중앙 슬라이드 양옆 여백 (주변 슬라이드 노출 범위)
        slidesToShow: 1,        // 한 번에 보여줄 메인 슬라이드 수
        speed: 600,             // 전환 속도
        dots: true,             // 하단 점 네비게이션
        autoplay : true,        // 자동 재생
        autoplaySpeed : 2000    // 자동 재생 대기 시간
    }); 
});

• centerMode: true: 슬라이드가 항상 중앙에 오도록 하고, 양쪽의 슬라이드 일부를 보여줍니다.
• slidesToShow: 1: 중앙에 가장 크게 보일 슬라이드는 1개입니다.
• centerPadding: '300px': 이 값이 클수록 양옆 슬라이드가 많이 가려지며, 중앙 슬라이드만 강조됩니다.

3. CSS 핵심: 축소(Scale) 및 Z-index 계층 제어

Slick은 현재 활성화된 슬라이드에 .slick-center 클래스를 부여합니다. 이를 이용하여 비활성 슬라이드는 축소하고, 슬라이드가 겹칠 때의 순서(Z-index)를 조정합니다.

3.1. 기본 축소 효과 (Scale Down)

/* 중앙이 아닌 슬라이드는 80%로 축소 */
.slick-slide:not(.slick-center) {
    z-index: 0;
    transform: scale(0.8); 
    opacity: 0.5; /* 흐릿하게 처리 (선택사항) */
}

/* 중앙 슬라이드는 원본 크기 유지 및 최상단 배치 */
.slick-center {
    z-index: 3; 
    transform: scale(1);
    opacity: 1;
}

.slick-slide {
    position: relative;
    transition: all 300ms ease; /* 부드러운 전환 애니메이션 */
}

3.2. 정교한 Z-index 계층 설정 (Overlap)

슬라이드가 서로 겹쳐 보일 때, 중앙 슬라이드가 가장 위에 오고 멀어질수록 뒤로 가도록 설정해야 자연스럽습니다.

/* 중앙 슬라이드 (Level 1) */
.slick-center {
    z-index: 3;
}

/* 중앙 바로 옆 슬라이드 (Level 2) */
.slick-active.slick-center + .slick-slide,
.slick-center + .slick-cloned {
    z-index: 2;
}

/* 두 칸 떨어진 슬라이드 (Level 3) */
.slick-active.slick-center + .slick-slide + .slick-slide {
    z-index: 1;
}

💡 Tip: 이 CSS 선택자 로직은 슬라이드가 회전할 때 인접 형제 선택자(+)를 활용하여 동적으로 깊이감(Depth)을 부여하는 고급 기법입니다.

4. 마무리: 동적 UI의 핵심

jQuery Slick Carousel은 단순한 슬라이더를 넘어, CSS transform 속성과 z-index를 조합하여 이처럼 동적이고 시각적으로 매력적인 3D 느낌의 UI를 쉽게 구현할 수 있게 해줍니다.

특히 centerMode와 centerPadding 값의 조합을 실험해보며 여러분의 웹사이트에 딱 맞는 최적의 비율을 찾아보세요!