Javascript를 이용한 사이트 만들기! - 슬라이드 효과사이트 만들기06

- 이번에는 prev/next 버튼을 누르면 이전사진/다음사진으로 넘어가고 밑의 dot버튼을 누르면 해당 차례의 사진으로 넘어가는 스크립트입니다.

- 이번에는 javascript으로 나타내 보았습니다.

- 스크립트 코드를 같이 보시죠 

선택자

- 선택자와 전역변수들을 하나로 모아놨습니다.

       // 선택자 
        const sliderWrap = document.querySelector(".slider__wrap");     
        const sliderImg = sliderWrap.querySelector(".slider__img");     // 이미지가 보이는 영역
        const sliderInner = sliderWrap.querySelector(".slider__inner");  // 이미지가 움직이는 영역
        const slider = sliderWrap.querySelectorAll(".slider");          // 개별적인 이미지
        const sliderDot = sliderWrap.querySelector(".slider__dot");     // 닷메뉴   
        const sliderBtn = sliderWrap.querySelectorAll(".slider__btn a");   // 버튼

        let currentIndex = 0; // 현재 보이는 이미지
        let sliderCount = slider.length; // 이미지 갯수
        let sliderInterval = 3000;  //이미지 변경 시간
        let sliderWidth = slider[0].clientWidth;    //이미지 가로 값
        

        let dotIndex = "";

- 4번과 같습니다.

- 사진의 높이를 알아오는 변수가 추가되었습니다.

Javascript

function init(){
    slider.forEach(() => dotIndex += "<a href='#' class='dot'>이미지2</a>");
    sliderDot.innerHTML = dotIndex;

    //첫 번째 닷 메뉴한테 활성화 표시하기
    sliderDot.firstChild.classList.add("active");

}
init();
// 이미지 에니메이션
function gotoSlider (num){
    sliderInner.style.transition = "all 400ms";
    sliderInner.style.transform = "translateX("+ -sliderWidth * num +"px)";
    currentIndex = num;
    // 닷 메뉴 활성화 하기
    let dotActive = document.querySelectorAll(".slider__dot .dot");
    dotActive.forEach((active) => active.classList.remove("active"));
    dotActive[num].classList.add("active");
}
// 버튼을 클릭했을 때
sliderBtn.forEach((btn, index) => {
    btn.addEventListener("click", () => {
        let prevIndex = (currentIndex+sliderCount-1) % sliderCount;
        let nextIndex = (currentIndex+1) % sliderCount;
        if(btn.classList.contains("prev")){
            gotoSlider(prevIndex);
        } else {
            gotoSlider(nextIndex);
        }
    })
})
// dot버튼을 누르면 해당 번호의 사진으로넘어감
let imageNodes = sliderWrap.querySelectorAll("img");
let dot = sliderWrap.querySelectorAll(".slider__dot .dot");
dot.forEach((el, i) => {
    el.addEventListener("click", function(){
        sliderWrap.querySelector(".dot.active").classList.remove("active");
        el.classList.add("active");
        sliderInner.style.transition = "all 400ms";
        sliderInner.style.transform = "translateX("+ -sliderWidth * i +"px)";
    })
});

- javascript 코드 입니다.

- 뭐가 너무 많으니 하나씩 다시 보시죠

function init(){
    slider.forEach(() => dotIndex += "<a href='#' class='dot'>이미지2</a>");
    sliderDot.innerHTML = dotIndex;

    //첫 번째 닷 메뉴한테 활성화 표시하기
    sliderDot.firstChild.classList.add("active");

}
init();

- init 함수 입니다. 이건 .slider__dot에 dot이라는 클라스를 가진 a태그를 사진의 갯수 만큼 만들어주고 그 첫 번째 dot에 active라는 클라스를 넣어 주었습니다.

function gotoSlider (num){
            sliderInner.style.transition = "all 400ms";
            sliderInner.style.transform = "translateX("+ -sliderWidth * num +"px)";
            currentIndex = num;
            // 닷 메뉴 활성화 하기
            let dotActive = document.querySelectorAll(".slider__dot .dot");
            dotActive.forEach((active) => active.classList.remove("active"));
            dotActive[num].classList.add("active");
        }
// 버튼을 클릭했을 때
sliderBtn.forEach((btn, index) => {
    btn.addEventListener("click", () => {
        let prevIndex = (currentIndex+sliderCount-1) % sliderCount;
        let nextIndex = (currentIndex+1) % sliderCount;
        if(btn.classList.contains("prev")){
            gotoSlider(prevIndex);
        } else {
            gotoSlider(nextIndex);
        }
    })
})

- 이 두 개의 함수는 서로 다른 함수인 것 처럼 보이지만 사실 아래 forEach문은  gotoSlider 함수를 실행시킬 때 어떤 매개변수 값을 넣어줄지 정해주는 함수로 실행문에 가깝다고 생각이 됩니다.

- forEach문을 먼저 설명을 해보자면 버튼을 클릭했을 때(여기서 버튼은 sliderBtn의 엘리먼트값인 prev/next 버튼을 말합니다. 이 버튼을 클릭했을 때 실행되는 함수가 안에 있는데 prevIndex변수의 값은 0,4,3,2,1 순으로 반복이 되는 것이고 nextIndex의 값은 0,1,2,3,4 순으로 반복이 되는 것입니다.

- 그 값을 각각의 상황에 따른 매개변수의 값으로 gotoSlider에 넣어주었습니다.

- gotoSlider를 설명해보면 매개변수로 가져온 값을 num에 넣어 해당사진의 좌표로 이동하게 하는 방법입니다.

- 또한  옆으로 넘어갈 때 원래있던 active를 없애고 해당하는 값에 active를 다시 넣어주었습니다.

let imageNodes = sliderWrap.querySelectorAll("img");
let dot = sliderWrap.querySelectorAll(".slider__dot .dot");

dot.forEach((el, i) => {
    el.addEventListener("click", function(){
        sliderWrap.querySelector(".dot.active").classList.remove("active");
        el.classList.add("active");
        sliderInner.style.transition = "all 400ms";
        sliderInner.style.transform = "translateX("+ -sliderWidth * i +"px)";
    })
});

- 마지막 forEach문입니다.

- 이건 밑의 dot버튼을 클릭했을 때 해당 버튼에 active 클라스를 주고 사진을 해당 좌표의 위치로 이동시켜 해당사진을 보여주는 방식입니다.

- 여기서 el값은 아까 위에서 만든 dot들입니다. 그리고 i는 그것들의 인덱스 값인 것이죠 (0-4)

- 중요한건 dot 선택자를 바로위에다가 만들어 주었는데 그 이유는 dot이 선택자들을 선언한 곳 이후에 만들어지기 때문에 여기에 만들어야 선택이 되기 때문입니다. imageNodes는 dot이 혼자있으면 적적하니까 같이 두었습니다ㅎㅎ^^;;

- 오늘도 수고하셨습니다!!