Slider Effect05- 버튼 추가

 

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 = sliderBtn.querySelector(".prev");       
        const sliderBtnNext = sliderBtn.querySelector(".next");

        let currentIndex = 0;   
        let sliderCount = slider.length;                   
        let sliderWidth = sliderImg.offsetWidth;    //sliderImg의 가로값을 변수로 지정.

        function gotoSlider(num){                       //슬라이드가 넘어가는 동작을 함수로 만들기.
            sliderInner.style.transition = "all 400ms";
            sliderInner.style.transform = "translateX("+ -sliderWidth * num +"px)";     //매개변수 num을 만들어서 num값의 순서만큼 이동
            // currentIndex--;
            // currentIndex++;
            currentIndex = num;         //현재 인덱스 값 = 매개변수 num 값
        }        
        sliderBtnPrev.addEventListener("click", ()=>{       //이전 버튼을 클릭하면 이전 이미지로 이동하는 이벤트 생성.
            let prevIndex = (currentIndex +(sliderCount-1)) %  sliderCount;              //이전 인덱스는 현재 인덱스 -1로 변수 설정.
                            //현재 인덱스 +(전체 갯수-1) % 전체갯수를 하면 나머지가 43210..
              gotoSlider(prevIndex);                                                    //gotoSlider 의 매개변수가 이전 인덱스 값 (-1)로 설정하고 실행.                                                                        
            // 첫 번째 이미지에 있을 때 0 --> 4           
            // if(currentIndex == 0){
            //     prevIndex = sliderCount -1;
            // } 이 if문을 위에 변수 지정할 때 처럼 한 줄로 표현이 가능하다. 둘다 맞으니 알아두자.                                            
        })
        sliderBtnNext.addEventListener("click", ()=>{       //다음 버튼을 클릭하면 다음 이미지로 이동하는 이벤트 생성.
            let nextIndex = (currentIndex + 1) % sliderCount;               //다음 인덱스는 현재 인덱스 +1로 변수 설정.
            //이미지 총 갯수 이상 넘어가지 않게. 01234 01234..

            gotoSlider(nextIndex);                          //gotoSlider 의 매개변수가 다음 인덱스 값 (+1)로 설정하고 실행.
        });

setInterval()참고

setInterval() - Web APIs | MDN

 

이번에는 슬라이드 이펙트에 버튼을 추가하는 예제 입니다. 버튼을 클릭하면 이전 이미지, 다음 이미지로 넘어가는 스크립트를 작성했습니다. 

if문을 작성할 때 삼항 연산자로도 작성할 수 있으니 알아둡시다.

 

다음 이미지를 클릭 할 때 마지막 사진까지 도달 했을 때 다시 1번 이미지로 돌아가는 스크립트도 작성해줍니다.