Slider Effect08- 슬라이드 - 무한, 버튼 추가, 닷 추가, 플레이버튼, 정지버튼

//설명. 참고사항.

   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 = document.querySelector(".prev");       
        const sliderBtnNext = document.querySelector(".next");       
        const sliderDot = document.querySelector(".slider__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);     //마지막 이미지 복사
        let posInitial = "";                            //posInitial 선언
        let dotIndex = "";                              //dotIndex 선언
        let sliderTimer = "";
        let interval = 1000;
        
        //이미지 복사 appendTo/prependTo
        sliderInner.appendChild(cloneFirst);      //처음 요소에 추가
        sliderInner.insertBefore(cloneLast, sliderFirst);      //sliderFirst 이전에 추가
        //이미지 움직이기
        function gotoSlider(index){
            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 += "<a href='#' class='dot'></a>";
            }
            dotIndex += "<a href='#' class='play'>play</a>";
            dotIndex += "<a href='#' class='stop show'>stop</a>";
            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", ()=>{
            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();
            }
            
        });            
          
        //플레이, 정지 이벤트
        document.querySelector(".play").addEventListener("click",()=>{
            document.querySelector(".play").classList.remove("show");
            document.querySelector(".stop").classList.add("show");
            autoPlay();
        });
        document.querySelector(".stop").addEventListener("click",()=>{
            document.querySelector(".stop").classList.remove("show");
            document.querySelector(".play").classList.add("show");                                  
            stopPlay();
        });