Slider Effect07- 슬라이드 - 무한, 버튼 추가, 닷 추가

 

setInterval()을 이용한 이미지 슬라이드 - 닷 버튼 추가

//설명. 참고사항.

    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 선언
        
        //이미지 복사 appendTo/prependTo
        sliderInner.appendChild(cloneFirst);      //처음 요소에 추가
        sliderInner.insertBefore(cloneLast, sliderFirst);      //cloneLast 요소에 추가

        


        //이미지 움직이기
        function gotoSlider(direction){
            sliderInner.classList.add("transition");
            posInitial = sliderInner.offsetLeft;
            console.log(posInitial);
            console.log(sliderWidth);
            //오른쪽 버튼
            if(direction == 1){
                //left: -800px            
                sliderInner.style.left = (posInitial - sliderWidth) + "px";
                currentIndex++;
                
            }
            //왼쪽 버튼
            if(direction == -1){
                sliderInner.style.left = (posInitial + sliderWidth) + "px";
                currentIndex--;
            }
            dotActive();
        }

        //닷 메뉴 추가
        function dotInit(){
            for(let i =0; i<sliderLength; i++){
                dotIndex += "<a href='#' class='dot'></a>";
            }
            sliderDot.innerHTML = dotIndex;
            sliderDot.firstElementChild.classList.add("active");
        }
        // 닷 버튼 활성화
        function dotActive(){
            let dotAll = document.querySelectorAll(".slider__dot .dot");
            dotAll.forEach(dot => {
                dot.classList.remove("active");    //전체 닷 메뉴 비활성화            
            });
            if(currentIndex == sliderLength){   //마지막 이미지 왔을 때
                dotAll[0].classList.add("active");
            } else if(currentIndex == -1){
                dotAll[sliderLength-1].classList.add("active");
            } else {
                dotAll[currentIndex].classList.add("active");   //현재 보고있는 닷 활성화
            }
        }
       

        //애니메이션 완료 후
        function checkIndex(){
            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;
            }
        }
        //버튼 클릭하기
        sliderBtnPrev.addEventListener("click", ()=>{gotoSlider(-1)});
        sliderBtnNext.addEventListener("click", ()=>{gotoSlider(1)});
        sliderInner.addEventListener("transitionend", checkIndex);  //트랜지션 했을때 이벤트 함수

        dotInit();