🧑‍💻 코드

(function () {
    const $imgs = document.querySelectorAll("img");
    const $leftArrow = document.querySelector(".fa-arrow-left");
    const $rightArrow = document.querySelector(".fa-arrow-right");
    const $dots = document.querySelectorAll("li");
    let currentIndex = 0;

    function previousImg() {
        if (currentIndex === 0) {
            $imgs[currentIndex].style.order = `${0}`;
            currentIndex = 4;
            $imgs[currentIndex].style.order = `${-1}`;
        } else {
            $imgs[currentIndex].style.order = `${0}`;
            currentIndex--;
            $imgs[currentIndex].style.order = `${-1}`;
        }
    }

    function nextImg() {
        if (currentIndex === 4) {
            $imgs[currentIndex].style.order = `${0}`;
            currentIndex = 0;
            $imgs[currentIndex].style.order = `${-1}`;
        } else {
            $imgs[currentIndex].style.order = `${0}`;
            currentIndex++;
            $imgs[currentIndex].style.order = `${-1}`;
        }
    }

    $leftArrow.addEventListener(("click"), previousImg);
    $rightArrow.addEventListener(("click"), nextImg);

    for (let i = 0; i < $dots.length; i++) {
        $dots[i].className += ` ${i}`;
    }

    for (let i = 0; i < $dots.length; i++) {
        $dots[i].addEventListener(("click"), (e) => {
            $imgs[currentIndex].style.order = `${0}`;
            currentIndex = Number(e.target.classList[1]);
            $imgs[currentIndex].style.order = `${-1}`;
        });
    }
})();

🧑‍🏫 코드 설명

• 처음 했을 때는 반복적이였던 코드들을 최대한 for문으로 처리했다.

• 당시엔 마우스이벤트의 e인자의 정보를 어떻게 써야할지 몰라 클릭한 점의 인덱스를 찾는데 고생했는데, 이번에는 해당 요소의 순서에 맞는 index를 클래스에 넣어주고 e.target.classList[1] 로 접근해 사용해서 훨씬 수월했다.

• 처음 만들었던 코드는 반응이 느렸었는데 지금까지 공부한걸로 생각해보면, 동적 style 변화를 너무 자주줘서 쓸데없는 리플로우와 리페인트가 계속 일어나서 그런것같다. 오늘 만든 코드는 지난번보단 확실히 동적 style 변화가 적게들어갔다.

🌐 GitHub, Netlify

https://github.com/roadzmoon76/Carousel_repeat
https://carousel-repeat.netlify.app/