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

- 오늘도 슬라이드 이펙트입니다.

- 해야될 것은 오늘은 dot 버튼 대신에 사진을 넣어두고 클릭했을 때 움직이는 것이죠 

- 하지만 오늘은 좌표를 움직이는 방식이 아니라 active라는 클라스를 넣어주고 빼주어서 표현하는 방식입니다.

 // 이미지 저장한 변수
 let images = [
        "./img/sliderEffect06-min.jpg",
        "./img/sliderEffect07-min.jpg",
        "./img/sliderEffect08-min.jpg",
        "./img/sliderEffect09-min.jpg",
        "./img/sliderEffect10-min.jpg"
        ];
        let currentIndex = 0; // 현재 보이는 이미지
        
function imageSlider(parent, images) {
    // 선택자
    let slider = {
        parent : parent,
        images: parent.querySelector(".slider__img"),
        thumnails: parent.querySelector(".slider__thumb"),
        prevBtn: parent.querySelector(".slider__btn .prev"),
        nextBtn: parent.querySelector(".slider__btn .next"),
    };

    // 이미지 출력하기 
    slider.images.innerHTML = images.map((image, index) => {
        return `<img src="${image}" alt="이미지${index}">`
    }).join(' ');
    // 이미지 활성화 하기 (active)
    let imageNodes = slider.images.querySelectorAll("img");
    imageNodes[currentIndex].classList.add("active");
    // 썸네일 이미지 출력하기
    slider.thumnails.innerHTML = slider.images.innerHTML;

    // 클릭했을 때
    let thumnailNodes = slider.thumnails.querySelectorAll("img");
    thumnailNodes[currentIndex].classList.add("active");
    
    thumnailNodes.forEach((el, i) => {
                el.addEventListener("click", function(){
                    slider.thumnails.querySelector("img.active").classList.remove("active");
                    el.classList.add("active");
                    imageNodes[i].classList.remove("active");
                    imageNodes[i].classList.add("active");
                })
            });
    // 왼쪽 (prev)버튼 클릭했을때 
    slider.prevBtn.addEventListener("click",function(){
        // 이미지 변경
        imageNodes[currentIndex].classList.remove("active");
        // 썸네일 변경
        thumnailNodes[currentIndex].classList.remove("active");
        currentIndex--;
        if (currentIndex < 0) currentIndex = images.length - 1;
        // 이미지 변경
        imageNodes[currentIndex].classList.add("active");
        // 썸네일 변경
        thumnailNodes[currentIndex].classList.add("active");
    })
    // 오른쪽 (next)버튼 클릭했을때 
    slider.nextBtn.addEventListener("click",function(){
        imageNodes[currentIndex].classList.remove("active");
        thumnailNodes[currentIndex].classList.remove("active");
        currentIndex++;
        currentIndex = currentIndex % images.length;
        imageNodes[currentIndex].classList.add("active");
        thumnailNodes[currentIndex].classList.add("active");
    })
}

imageSlider(document.querySelector(".slider__wrap"), images);

- 일단 이미지를 출력하는 것에 차이가 있습니다. 원래는 html에서 img태그를 이용해 출력을 해주었다면 이번엔 javascript안에 html 태그를 출력하는 방식으로 img를 넣어주었습니다.

- 그리고 active 클라스 또한 javascript를 이용해 넣어 주었죠 사실 그냥 넣어주어도 상관없는 것 같긴합니다.

 // 이미지 출력하기 
slider.images.innerHTML = images.map((image, index) => {
    return `<img src="${image}" alt="이미지${index}">`
}).join(' ');
// 이미지 활성화 하기 (active)
let imageNodes = slider.images.querySelectorAll("img");
imageNodes[currentIndex].classList.add("active");
// 썸네일 이미지 출력하기
slider.thumnails.innerHTML = slider.images.innerHTML;
 // 클릭했을 때
let thumnailNodes = slider.thumnails.querySelectorAll("img");
thumnailNodes[currentIndex].classList.add("active");

- 그리고 밑에는 닷 버튼 대신 사진을 넣어주었습니다.

- 굳이 열심히 다시 만들 필요없이 slider.images.innerHTML를 slider.thumnails.innerHTML로 만들어 주면 됩니다.

- 그리고 클릭했을 때 썸네일에도 active클라스를 넣어주었습니다.

thumnailNodes.forEach((el, i) => {
    el.addEventListener("click", function(){
        slider.thumnails.querySelector("img.active").classList.remove("active");
        el.classList.add("active");
        imageNodes[i].classList.remove("active");
        imageNodes[i].classList.add("active");
    })
});

- 그리고 클릭했을 때 액티브가 있는 이미지와 썸네일 태그는 일단 액티브를 지워주고 클릭한 이미지에는 액티브 클라스를 넣어주었습니다.

// 왼쪽 (prev)버튼 클릭했을때 
slider.prevBtn.addEventListener("click",function(){
    // 이미지 변경
    imageNodes[currentIndex].classList.remove("active");
    // 썸네일 변경
    thumnailNodes[currentIndex].classList.remove("active");
    currentIndex--;
    if (currentIndex < 0) currentIndex = images.length - 1;
    // 이미지 변경
    imageNodes[currentIndex].classList.add("active");
    // 썸네일 변경
    thumnailNodes[currentIndex].classList.add("active");
})
// 오른쪽 (next)버튼 클릭했을때 
slider.nextBtn.addEventListener("click",function(){
    imageNodes[currentIndex].classList.remove("active");
    thumnailNodes[currentIndex].classList.remove("active");
    currentIndex++;
    currentIndex = currentIndex % images.length;
    imageNodes[currentIndex].classList.add("active");
    thumnailNodes[currentIndex].classList.add("active");
})

imageSlider(document.querySelector(".slider__wrap"), images);

- 그리고 이 부분은 prev/next 버튼을 눌렀을 때 이미지와 썸네일의 상태가 변하는 스크립트입니다.

- 뭐 그런거죠..