버튼을 눌렀을때 케러셀의 이동

버튼을 눌렀을때 한칸씩 가지 않고 두칸씩 이동하는 이유는 어느부분 에서 있을끼요????

window.addEventListener('load', function() {
    var carousels = document.getElementsByClassName('carousel');
    //dom문법을 쓴다는건 객체를 의미한다
    //케러셀 이벤트를 등록하는 로직
    //캐러셀 랭스: 
    for(var i = 0; i < carousels.length; i++) {
        addEventToCarousel(carousels[i]); // 현재해당하는 carousels 가져옴(배열)
    }
});
//carouselELem에는 carousels[i]가 들어가짐

function addEventToCarousel(carouselElem) {
    var ulElem = carouselElem.querySelector('ul');
    var liElems = ulElem.querySelectorAll('li');

    //너비값 조정
    var liWidth = liElems[0].clientWidth; //현재 li의 너비값 : 600px이옴
    var adjustedWidth = liElems.length * liWidth; //이미지 갯수 * 너비
    ulElem.style.width = adjustedWidth + 'px';//2400px이 됌

    //슬라이더 버튼 이벤트 등록 , 슬라이드에 대한 객체 정보 다빼옴
    var slideButtons = carouselElem.querySelectorAll('.slide');
    //슬라이드 버튼 갯수만큼 반복
    for (var i=0; i < slideButtons.length; i++) {
        //왼쪽버튼 오른쪽버튼 총 2번을 반복한다.
        slideButtons[i].addEventListener('click', createListenerSlide(carouselElem));
    }
} //슬라이드 버트을 누를때 이벤트를 클로저로 사용하기위해
//클로저로 해서 캐러셀을 이벤트가 호출될때 바뀌지 않고 사용하기 위해
//버튼이 담겨잇는 케러셀만 가져올수있도록 클로저를 이용
function createListenerSlide(carouselElem) {
    return function(event) { //event는 매개변수고 이 블록안에서 사용가능
        var clickedButton = event.currentTarget;//현재 클릭한 버튼 가져오기
        //클릭이라는 이벤트가 발동됐을때 return함수가 호출이된다.

        // 값 가져오기
        var liElems = carouselElem.querySelectorAll('li');
        var liCount = liElems.length; //길이는 4야
        var currentIndex = carouselElem.attributes.data.value;
        //currentIndex : 현재 보고있는 이미지의 순번
        //carouselElem의 모든 속성을 가져오고 데이터를 가져오겠다

        //슬라이드 버튼 체크 right값을 포함하는지
        //-1해주는이유는 4개일경우 마지막은 3이 마지막이기때문
        if(clickedButton.className.includes('right') && currentIndex < liCount - 1) {
            currentIndex ++;
            scrollDiv(carouselElem, currentIndex);
            //위에서 3이라면 ++되므로 4번의 위치로 스크롤을 조정해주는 역할
        } else if(clickedButton.className.includes('left') && currentIndex > 0) {
            currentIndex --; //0이면 왼쪽으로 못넘김
            scrollDiv(carouselElem, currentIndex);
        }

        //인디케이터 업데이트 
        updateIndicator(carouselElem, currentIndex);
        //슬라이드 버튼 보여줌 여부 업데이트
        updateSlideButtonvisible(carouselElem, currentIndex, liCount);
        //새롭게 보여지는 이미지 인덱스 값을 현재 data 값으로 업데이트
        carouselElem.attributes.data.value = currentIndex;
        //만약 currentIndex가 2라면  1에서 2로 바뀌는것
    }
}  
//다음으로 이동할 매개변수로 nextIndex 이용
//여기서 왜 2칸씩 가게될까
function scrollDiv(carouselElem, nextIndex) {
    var scrollable = carouselElem.querySelector('div');//오버플로 히든되는
    var liWidth = scrollable.clientWidth;//div의 사이즈 600이라 600이올거임
    var newLeft = liWidth * nextIndex; //2번을 하야된다 하면 1200px이 움직일것

    scrollable.scrollTo({left: newLeft, behavior: 'smooth'});
}
//querySelectorAll 이기 때문에 배열로 받아온다
function updateIndicator(carouselElem, currentIndex) {
    var indicators = carouselElem.querySelectorAll('footer > div');
    for (var i = 0; i < indicators.length; i++) {
        if (currentIndex == i) {
            indicators[i].className = 'active';//객체이므로 .className을 쓰는거지
        }
        else {
            indicators[i].className = '';
        }
    }
}

function updateSlideButtonvisible(carouselElem, currentIndex, liCount) {
    var left = carouselElem.querySelector('.slide-left');
    var right = carouselElem.querySelector('.slide-right');

    if (currentIndex > 0) {
        left.style.display = 'block';
    }
    else {
        left.style.display = 'none';
    }

    if(currentIndex < liCount - 1) {
        right.style.display = 'block';
    }
    else {
        right.style.display = 'none';
    }
}

인프런 커뮤니티 질문&답변