<section class="intro">
<div class="introSlider">
<div class="slideItem"></div>
<div class="slideItem"></div>
<div class="slideItem"></div>
</div>
<!-- 프로그레스 바 -->
<div class="progressBar">
<div class="progress"></div>
</div>
<!-- 슬라이더 번호 -->
<div class="progressNo">
<span>01</span>
<span>02</span>
</div>
<!-- 재생/정지 버튼 -->
<button class="progressBtn"></button>
</section>
/* reset */
* { margin: 0; padding: 0; }
button { border: none; }
/* 슬라이더 */
.intro { position: relative; width: 100vw; height: 100vh; padding: 0; overflow: hidden; }
.introSlider { display: flex; width: 100%; height: 100%; padding: 0; transition: transform 0.5s ease; }
.introSlider .slideItem { position: relative; width: 100%; flex-shrink: 0; }
/* 프로그레스 바 */
.intro .progressBar { position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%); width: 35%; background-color: #929292; height: 3px; overflow: hidden; }
.intro .progressBar .progress { height: 100%; background-color: #1a1a1a; width: 0%; transition: width 5s linear; }
/* 슬라이더 번호 */
.intro .progressNo { position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%); display: flex; justify-content: space-between; width: 50%; color: var(--mainTxtColor); }
/* 재생, 정지 버튼 */
.intro .progressBtn { position: absolute; left: 77%; bottom: 10px; width: 20px; height: 20px; color: #fff; background: url('https://blog.kakaocdn.net/dn/mhzTr/btsHFxtZpUK/7fjd1ftrMrzpcA5Y783kJk/img.png') no-repeat; background-size: cover; }
.intro .progressBtn.play { background-image: url('https://blog.kakaocdn.net/dn/ceMqwq/btsHFa6RMzO/iKuw9Q4OCYqqoo3k8lpNck/img.png'); }
/* 슬라이드 아이템 색상 설정 */
.introSlider .slideItem:nth-child(1) { background: #ffb7b7; }
.introSlider .slideItem:nth-child(2) { background: #b7deff; }
.introSlider .slideItem:nth-child(3) { background: #ecffb7; }
const slides = document.querySelectorAll('.introSlider .slideItem');
const progressBar = document.querySelector('.progress');
const progressNum1 = document.querySelector('.progressNo span:first-child');
const progressNum2 = document.querySelector('.progressNo span:last-child');
const progressBtn = document.querySelector('.progressBtn');
let num = [1, 2];
let currentIndex = 0;
let width = slides[0].clientWidth;
let timer;
let autoSlide = true;
// 슬라이더 숫자 초기화
progressNum1.innerText = `0${num[0]}`;
progressNum2.innerText = `0${num[1]}`;
// 이전 슬라이드
function slideToPrev(){
num[0] = num[0] == 1 ? 3 : num[0]-1;
num[1] = num[1] == 1 ? 3 : num[1]-1;
currentIndex = currentIndex == 0 ? 2: (currentIndex - 1) % slides.length;
let newTransformValue = -width * currentIndex;
document.querySelector('.introSlider').style.transform = `translateX(${newTransformValue}px)`;
progressNum1.innerText = `0${num[0]}`;
progressNum2.innerText = `0${num[1]}`;
resetProgressBar();
if(autoSlide == true) playProgressBar();
}
// 다음 슬라이드
function slideToNext() {
num[0] = num[0] == 3 ? 1 : num[0]+1;
num[1] = num[1] == 3 ? 1 : num[1]+1;
currentIndex = (currentIndex + 1) % slides.length;
let newTransformValue = -width * currentIndex;
document.querySelector('.introSlider').style.transform = `translateX(${newTransformValue}px)`;
progressNum1.innerText = `0${num[0]}`;
progressNum2.innerText = `0${num[1]}`;
resetProgressBar();
if(autoSlide == true) playProgressBar();
}
function resetProgressBar(){
progressBar.style.transition = 'none';
progressBar.style.width = '0%';
}
function playProgressBar(){
setTimeout(() => {
progressBar.style.transition = 'width 5s linear';
progressBar.style.width = '100%';
}, 100);
}
// 자동 슬라이드 ON
function playAutoSlide(){
timer = setInterval(slideToNext, 5000);
resetProgressBar();
playProgressBar();
}
// 자동 슬라이드 OFF
function pauseAutoSlide(){
clearInterval(timer);
resetProgressBar();
}
// 자동 슬라이드 on/off
progressBtn.addEventListener('click', function(){
this.classList.toggle('play');
autoSlide = !autoSlide; // true / false
autoSlide == true ? playAutoSlide() : pauseAutoSlide();
})
playAutoSlide();
// 드래그
const slideWrap = document.querySelector('.introSlider');
let dragStartX = 0;
let dragEndX = 0;
slideWrap.addEventListener('touchstart', dragStart);
slideWrap.addEventListener('touchmove', dragMove);
slideWrap.addEventListener('touchend', dragEnd);
// touchstart
function dragStart(e) {
dragStartX = e.touches[0].clientX;
if(autoSlide == true) clearInterval(timer); //자동슬라이드 중지
}
// touchmove
function dragMove(e) {
dragEndX = e.touches[0].clientX;
}
// touchend
function dragEnd(e) {
let diffX = dragEndX - dragStartX;
if (diffX > 50) {
slideToPrev();
} else if (diffX < -50) {
slideToNext();
}
if(autoSlide == true) timer = setInterval(slideToNext, 5000); // 자동슬라이드 재시작
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.