Slider Effect - 이전, 다음 버튼 추가

 

설명

이미지의 인덱스 값의 따라 '이전'버튼을 눌렀을 때 => 현재 인덱스 값의 - 1 씩 감소합니다.

이미지의 인덱스 값의 따라 '다음'버튼을 눌렀을 때 => 현재 인덱스 값의 + 1 씩 증가합니다.

//slider05
const sliderWrap = document.querySelector(".slider__wrap");
const sliderImg = document.querySelector(".slider__img");        //이미지 보이는 영역
const sliderInner = document.querySelector(".slider__inner");    //이미지 움직이는 영역
const slider = document.querySelectorAll(".slider");             //5개의 이미지 저장
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;

function gotoSlider(num){
	sliderInner.style.transition = "all 400ms";                  
    sliderInner.style.transform = "translateX("+ -sliderWidth * num +"px)";
    //curentIndex--;
    //curentIndex++;
    currentIndex = num;                                    //현재의 값
    }

    // sliderBtnPrev.addEventListener("click", () => {            //이전 버튼을 눌렀을 때
    //     let prevIndex = (currentIndex - 1) % sliderCount;      //현재의 값이 - 1 씩 감소
    //     // currentIndex--;

    //첫번째 이미지에 위치해 있을 때 0 --> 4
    //     if(currentIndex == 0){
    //         prevIndex = sliderCount -1;
    //     }
    //     gotoSlider(prevIndex)
    // })

	sliderBtnPrev.addEventListener("click", () => {                         //이전 버튼을 눌렀을 때
    	let prevIndex = (currentIndex + (sliderCount - 1)) % sliderCount;   //현재의 값이 - 1 씩 감소

	//첫번째 이미지에 위치해 있을 때 0 --> 4
        gotoSlider(prevIndex)
    })
        

	sliderBtnNext.addEventListener("click", () => {            //다음 버튼을 눌렀을 때
    	let nextIndex = (currentIndex + 1) % sliderCount;      //현재의 값이 + 1 씩 증가
        // currentIndex++;
        gotoSlider(nextIndex)
    })</code