Slider Effect 08 - 무한, 버튼 추가, 닷 버튼 추가, 자동 플레이, 플레이,정지 버튼

{
const sliderWrap = document.querySelector(".slider__wrap")
        const sliderImg = document.querySelector(".slider__img")        //이미지 보이는 영역
        const sliderInner = document.querySelector(".slider__inner")    //이미지 움직이는 전체 영역
        const slider = document.querySelectorAll(".slider")             //슬라이드 이미지
        const sliderBtn = document.querySelector(".slider__btn")    //버튼
        const sliderBtnPrev = sliderBtn.querySelector(".prev")    //이전 버튼
        const sliderBtnNext = sliderBtn.querySelector(".next")    //다음 버튼
        const sliderDot = document.querySelector(".slider__dot")    //dot 버튼


        let currentIndex = 0;                           //현재 이미지
        let sliderWidth =  sliderImg.offsetWidth;   //이미지 가로 값
        let sliderLength = slider.length                //이미지 총 갯수
        let sliderFirst = slider[0];                        //첫번째 이미지
        let sliderLast = slider[sliderLength -1]        //마지막 이미지
        let cloneFirst = sliderFirst.cloneNode(true);       //첫 번째 이미지 복사를 변수에 저장
        let cloneLast = sliderLast.cloneNode(true);         //마지막 이미지 복사
        //clone() 제이쿼리에서 복사
        let posInitial ="";
        let dotIndex = "";
        let sliderTimer = "";
        let interval = 3000;

        //이미지 복사   appendTo/prependTo : append/prepend
        sliderInner.appendChild(cloneFirst);    //첫 번째 이미지
        sliderInner.insertBefore(cloneLast, sliderFirst);    //마지막 이미지

        //이미지 움직이기
        function gotoSlider(index){ //index에 1 2 3 4 5 값이 들어감
            sliderInner.classList.add("transition")
            sliderInner.style.left = -sliderWidth * (index+1) + "px";

            console.log(currentIndex);
            currentIndex = index;
            //두번째 이미지 : left: -1600px
            //세번째 이미지 : left: -2400px
            //네번째 이미지 : left: -3200px
            //다섯번째 이미지 : left: -4000px
        };

        //닷 메뉴 셋팅 
        function dotInit(){
            for(let i=0; i<sliderLength; i++){
                dotIndex += ""
            }
            dotIndex += "play"
            dotIndex += "stop"
            sliderDot.innerHTML = dotIndex;
            sliderDot.firstElementChild.classList.add("active");
        }
        dotInit();

        //자동플레이
        function autoPlay(){
            sliderTimer = setInterval(()=>{
                gotoSlider(currentIndex + 1);
            }, interval);
        }
        autoPlay();

        function stopPlay(){
            clearInterval(sliderTimer);
        }

        sliderBtnPrev.addEventListener("click", () => {
            let prevIndex = currentIndex -1;
            gotoSlider(prevIndex);
        })

        sliderBtnNext.addEventListener("click", () => {
            let nextIndex = currentIndex +1;
            gotoSlider(nextIndex);
        })

        sliderInner.addEventListener("transitionend", () => {   //transition 있을떄 실행
            sliderInner.classList.remove("transition")

            if(currentIndex == -1){
                sliderInner.style.left = -(sliderLength * sliderWidth) + "px"
                currentIndex = sliderLength -1; 
            }
            if(currentIndex == sliderLength){
                sliderInner.style.left = -(1 * sliderWidth) + "px"
                currentIndex = 0; 
            }
        });

        //마우스 오버했을때 멈추기
        sliderInner.addEventListener("mouseenter", ()=>{
            stopPlay();
        })
        //마우스가 떠났을때 다시 오토 플레이
        sliderInner.addEventListener("mouseleave", ()=>{
            if(document.querySelector(".play").classList.contains("show")){
                stopPlay();
            } else {
                autoPlay();
            }
            
        })

        // sliderInner.addEventListener("mouseleave", ()=>{
        //     autoPlay();
        //     if(document.querySelector(".stop").classList.contains("show")){
        //         stopPlay();

        // })

        //play 누르면 play 안보이고 stop버튼이 보이게
        document.querySelector(".play").addEventListener("click", ()=> {
            document.querySelector(".play").classList.remove("show");
            document.querySelector(".stop").classList.add("show");
            autoPlay();
        })

        //stop 누르면 stop는 안보이고 play는 보이게
        document.querySelector(".stop").addEventListener("click", ()=> {
            document.querySelector(".stop").classList.remove("show");
            document.querySelector(".play").classList.add("show");
            stopPlay();
        })
}