스파르타 코딩클럽(사전캠프 프로젝트) 무한 루프 멀티플 슬라이스 코드

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);

    }

}

출처 :   Rock's Easyweb 유투버님