Slide Effect - 버튼 추가

highlight();    //외부 스크립트 함수 (highlight)호출
modal ();       //외부 스크립트 함수 (modal, 소스보기 창)호출
tabMenu ();     //외부 스크립트 함수 (tabMenu, 소스보기의 탭 메뉴)호출

// slider03
const sliderWrap = document.querySelector(".slider__wrap");      //sliderWrap에 div 태그 .slider__wrap 저장
const sliderImg = document.querySelector(".slider__img");        //sliderImg에 div 태그 .slider_img 저장, 이미지 한 칸만 보이는 영역
const sliderInner = document.querySelector(".slider__inner");    //이미지 움직이는 영역
const slider = document.querySelectorAll(".slider");             //slider에 div 태그 .slider (최종적으로 이미지를 담는 다섯개의 div)
const sliderBtn = document.querySelector(".slider__btn");       //sliderBtn에 div 태그 .slider__btn 저장
const sliderBtnPrev = sliderBtn.querySelector(".prev");         //slideBtnPrev에 이전 이미지로 넘어가는 버튼(a태그) 추가
const sliderBtnNext = sliderBtn.querySelector(".next");         //slideBtnNext에 다음 이미지로 넘어가는 버튼(a태그) 추가

let currentIndex = 0;
let sliderCount = slider.length;    //이미지 갯수
let sliderWidth = sliderImg.offsetWidth;    //이미지 가로 값

function gotoSlider(num){
    sliderInner.style.transition = "all 400ms";//0.4초
    sliderInner.style.transform = `translateX(-${sliderWidth * num}px)`;    //-800만큼 움직인다.
    currentIndex = num;     //currentIndex에 매개변수로 받은 num값을 넣어 현재 인덱스값을 변경시킨다.
}

sliderBtnPrev.addEventListener("click", () => {     //이전 버튼 클릭시
    let prevIndex = (currentIndex + (sliderCount -1)) % sliderCount;    //prevIndex에는 currentIndex보다 1을 뺀 값이 들어간다. currentIndex가 0일 경우 4가 들어간다.
    //첫번째 있을 때 0 -> 4
    gotoSlider(prevIndex);      //매개변수로 prevIndex값을 전달하여 이미지가 움직이는 함수 호출
})
sliderBtnNext.addEventListener("click", () => {     //다음 버튼 클릭시
    let nextIndex = (currentIndex + 1) % sliderCount;       //nextIndex에는 currentIndex보다 1을 더한 값이 들억ㄴ다. currentIndex가 4일 경우 0이 들어간다.
    //이미지 총 갯수 이상 넘어가지 않게
    gotoSlider(nextIndex);      //매개변수로 nextIndex값을 전달하여 이미지가 움직이는 함수 호출
})

 

슬라이드 좌우 버튼 사이트