Slick Slider 완벽 가이드 - 기본 사용법부터 Progress Bar 적용까지!
CSS 25.03.05➰➰➰
Slick Slider란?
반응형에 터치 지원까지 되는 강력한 jQuery 기반 슬라이더 플러그인인데요!
이번 포스팅에서는 Slick Slider의 기본 사용법부터 progress bar를 활용한 슬라이드 진행 상태 표시까지 한 번에 정리해드릴게요.
Slick Slider를 활용해 스타일리시한 웹사이트를 만들어보세요!
Slick Slider의 핵심 기능✏️
✅반응형 지원 : 모바일, 태블릿, PC 어디서든 문제없이 동작!
✅터치 & 드래그 지원 : 스마트폰에서도 부드럽게 넘길 수 있어요.
✅네비게이션 옵션 : 화살표 & 점(dot) 네비게이션으로 원하는 방식 선택 가능.
✅자동 재생 및 루프(loop) 지원 : 별도 조작 없이도 자동으로 슬라이드 전환!
✅CSS & JavaScript 커스터마이징 가능 : 원하는 대로 스타일 변경 가능.
Slick Slider 설치 및 기본 사용법✏️
1. Slick Slider 설치하기
일단 jQuery와 Slick의 CSS, JS 파일을 불러와야겠죠?
1 2 3 4 5 6 7 | <!-- Slick CSS 파일 --> <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/slick-carousel/slick/slick.css"/> <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/slick-carousel/slick/slick-theme.css"/> <!-- jQuery 및 Slick JS 파일 --> | cs |
2. HTML 구조 잡기
1 2 3 4 5 | <div class="slider"> <div><img src="image1.jpg" alt="Slide 1"></div> <div><img src="image2.jpg" alt="Slide 2"></div> <div><img src="image3.jpg" alt="Slide 3"></div> </div> | cs |
3. Slick Slider 적용하기
1 2 3 4 5 6 7 8 | $(document).ready(function(){ $('.slider').slick({ autoplay: true, autoplaySpeed: 3000, dots: true, arrows: false }); }); | cs |
Progress Bar 추가하기 (슬라이드 진행 상태 표시!)✏️
Slick Slider에 progress bar까지 더하면 더욱 깔끔한 UX를 만들 수 있어요.
1. Progress Bar HTML 추가하기
1 2 3 4 5 6 7 8 | <div class="slider-container"> <div class="slider"> <div><img src="image1.jpg" alt="Slide 1"></div> <div><img src="image2.jpg" alt="Slide 2"></div> <div><img src="image3.jpg" alt="Slide 3"></div> </div> <div class="progress-bar"></div> </div> | cs |
2. CSS 스타일 적용
1 2 3 4 5 6 7 8 9 10 11 12 | .slider-container { position: relative; } .progress-bar { position: absolute; bottom: 0; left: 0; width: 0%; height: 5px; background-color: #ff5733; transition: width 0.3s linear; } | cs |
3. JavaScript로 Progress Bar 제어하기
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | $(document).ready(function(){ let $slider = $('.slider'); let $progressBar = $('.progress-bar'); $slider.on('init reInit afterChange', function(event, slick, currentSlide){ let slideCount = slick.slideCount; let currentIndex = (currentSlide ? currentSlide : 0) + 1; let progress = (currentIndex / slideCount) * 100; $progressBar.css('width', progress + '%'); }); $slider.slick({ autoplay: true, autoplaySpeed: 3000, dots: true, arrows: false }); }); | cs |
[예제]
프로그레스 바에 텍스트를 추가하여 현재 슬라이드에 대한 주제를 동적으로 표시하는 방법을 소개합니다.
이 방법은 슬라이드의 진행 상황을 시각적으로 보여줄 뿐만 아니라, 각 슬라이드에 맞는 주제나 설명을 실시간으로 업데이트해 사용자가 더욱 직관적으로 콘텐츠를 이해할 수 있도록 돕습니다.
See the Pen Untitled by designkits (@designkits) on CodePen.
간단한 설정만으로 웹사이트에 동적인 요소를 추가할 수 있어 사용자 경험을 한층 더 향상시킬 수 있습니다.
다양한 옵션을 조합해 자신만의 독특한 슬라이더를 만들어보세요!
➰➰➰
