Slider Effect06- 닷 버튼 추가

 

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 sliderDot = document.querySelector(".slider__dot");       
     

        let currentIndex = 0;   
        let sliderCount = slider.length;                   
        let sliderWidth = sliderImg.offsetWidth;
        let dotIndex = "";                          //dotIndex 변수를 미리 선언해서 공백 칸을 만든다.
        let dotActive;                              // dotActive 변수를 미리 선언.          

        function init(){
            //이미지 갯수만큼 <a></a> 만들기
            // dotIndex += "<a href='#'' class='dot'></a>";
            // dotIndex += "<a href='#'' class='dot'></a>";
            // dotIndex += "<a href='#'' class='dot'></a>";
            // dotIndex += "<a href='#'' class='dot'></a>";
            // dotIndex += "<a href='#'' class='dot'></a>";

            slider.forEach(() => {  
                dotIndex += "<a href='#'' class='dot'></a>";  //각각의  slider의  dotIndex에 a태그를 넣어주기.
                                                                //하나만 들어가면 안되니까 +=로 넣어주기.
            });
            sliderDot.innerHTML = dotIndex;                 //sliderDot 안에 공백값으로 만든 dotIndex를 HTML로 넣어주기
            //첫번째 dot 버튼한테 active.
            sliderDot.firstElementChild.classList.add("active"); //첫 번째 dotIndex에 active 클래스를 추가해주기.
        }
        init();

        function gotoSlider(num){                       //슬라이드가 넘어가는 동작을 함수로 만들기.
            sliderInner.style.transition = "all 600ms";
            sliderInner.style.transform = "translateX("+ -sliderWidth * num +"px)";     //매개변수 num을 만들어서 num값의 순서만큼 이동            
            currentIndex = num;         //현재 인덱스 값 = 매개변수 num 값

            dotActive = document.querySelectorAll(".slider__dot .dot"); //모든 닷을 포함하는 dotActive 변수 지정.
            dotActive.forEach((el)=>{
                el.classList.remove("active");          // active 되어있는 dot의 클래스를 제거.               
            });
            dotActive[num].classList.add("active");     //dotActive의 배열 순서가 currentIndex 일 때 해당 순서의 dot에 active 클래스 추가.
        }

        document.querySelectorAll(".slider__dot .dot").forEach((dot, index)=>{      //dot을 클릭했을 때 이벤트 설정.
            dot.addEventListener("click", ()=>{
                gotoSlider(index);              //gotoSlider함수에 매개변수를 index를 넣어서 실행.
            });
        });
        

        document.querySelectorAll(".slider__btn a").forEach((btn, index)=>{     
            btn.addEventListener("click", ()=>{                             //슬라이더 버튼을 클릭했을 때 이벤트 설정
                let prevIndex = (currentIndex +(sliderCount-1)) %  sliderCount;     //첫번째 이미지에서 뒤로가기 하면 끝 이미지가 나오게
                let nextIndex = (currentIndex + 1) % sliderCount;                   //다음 버튼 클릭하면 다음 이미지로 나오게
                        
                if(btn.classList.contains("prev")){     //if문을 이용하여 prev 클래스를 포함하고 있으면 이전버튼 클릭되는 함수.
                    gotoSlider(prevIndex);
                } else {                        // 아니라면 다음 버튼이 클릭되는 함수.
                    gotoSlider(nextIndex); 
                }  
            });  
        });

setInterval()참고

setInterval() - Web APIs | MDN

 

이번에는 이전, 다음 이미지로 이동하는 버튼이 있는 예제에 더해서 하단에 닷 버튼을 추가해서 해당 순서의 닷 버튼을 클릭하면 거기에 맞는 이미지로 이동하는 예제입니다.