Slider Effect 05 - 버튼 추가

    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");               // prev버튼
    const sliderBtnNext = sliderBtn.querySelector(".next");              // next버튼
 
    let currentIndex = 0;						// 현재 인덱스를 0으로 잡고
    let sliderCount = slider.length;				// 이미지 갯수를 sliderCount로 저장
    let sliderWidth = sliderImg.offsetWidth;		// 이미지 width값을 sliderWidth에 저장

    function gotoSlider(num){		// gotoSlider라는 매개변수함수를 생성
        sliderInner.style.transition = "all 400ms";		// transition 효과 0.4초걸리게
        sliderInner.style.transform = "translateX("+ -sliderWidth * num +"px)"		// 움직이는 구간을 translate로 이미지 width값만큼 이동
        currentIndex = num;			// 현재 보여지는 이미지의 번호
    }
        
    sliderBtnPrev.addEventListener("click", () => {			// prev버튼을 클릭했을 때
        let prevIndex = (currentIndex + (sliderCount-1)) % sliderCount		// 0~4만 반복시키기위해 나머지로 표현
        gotoSlider(prevIndex);							// gotoSlider 함수로 매개변수 전달
    })
    sliderBtnNext.addEventListener("click", () => {			// next버튼을 클릭했을 때
        let nextIndex = (currentIndex + 1) % sliderCount		// 0~4만 반복시키기 위해 나머지로 표현
        gotoSlider(nextIndex);							// gotoSlider 함수로 매개변수 전달
    })

전체 사이트 보기