웹(Web)개발
스파르타 코딩클럽(사전캠프 프로젝트) 무한 루프 멀티플 슬라이스 코드
H.S-Backend
2024. 4. 4. 17:45
반응형
var slides = document.querySelector('.slides'),
slide = document.querySelectorAll('.slides li'),
currentIdx = 0,
slideCount = slide.length,
slideWidth = 200,
slideMargin = 30,
prevBtn = document.querySelector('.prev'),
nextBtn = document.querySelector('.next');
makeClone();
function makeClone() {
for (var i = 0; i < slideCount; i++) {
// a.cloneNode(), a.cloneNode(true)
var cloneSlide = slide[i].cloneNode(true);
cloneSlide.classList.add('clone');
// a.appendChild(b)
slides.appendChild(cloneSlide);
}
for (var i = slideCount - 1; i >= 0; i--) {
var cloneSlide = slide[i].cloneNode(true);
cloneSlide.classList.add('clone');
// a.prepend(b)
slides.prepend(cloneSlide);
}
updateWidth();
setInitalPos();
setTimeout(function () {
slides.classList.add('animated');
}, 100)
}
function updateWidth() {
var currentSlides = document.querySelectorAll('.slides li');
var newSlideCount = currentSlides.length;
var newWidth = (slideWidth + slideMargin) * newSlideCount - slideMargin + 'px';
slides.style.width = newWidth;
}
function setInitalPos() {
var initialTranslateValue = -(slideWidth + slideMargin) * slideCount;
// slides( transform:translateX(-1000px));
slides.style.transform = 'translateX(' + initialTranslateValue + 'px)'
}
prevBtn.addEventListener('click', function () {
moveSlide(currentIdx - 1);
});
nextBtn.addEventListener('click', function () {
moveSlide(currentIdx + 1);
});
function moveSlide(num) {
slides.style.left = -num * (slideWidth + slideMargin) + 'px';
currentIdx = num;
console.log(currentIdx, slideCount);
if (currentIdx == slideCount || currentIdx == -slideCount) {
setTimeout(function () {
slides.classList.remove('animated');
slides.style.left = '0px';
currentIdx = 0;
}, 500);
setTimeout(function(){
slides.classList.add('animated');
}, 600);
}
}
반응형