[따라만들기] content slider upgrade(click back)

https://youtu.be/ny-oNKwj2Zk

 

//문서의 내용이 모두 로드되면 할 일
//대상.

// 변수 지정
const slidrWeaper = document.querySelector(".container");
const slideContainer = document.querySelector(".slider-container");
const slide = document.querySelectorAll(".slide");    //li slide 
const navPrev = document.getElementById("prev");
const navNext = document.getElementById("next");
let slideHight = 0;
let currentIndex = 0;

//높이를 따로 지정하는 이유는 absolute로 구성되어서임, 부모도 absolute여서 높이가 없는거였음
// //슬라이드의 높이 확인하여 부모의 높이로 지정하기
// //높이를 구해와서 슬라이드 slider-container를 높이를 지정하겠다.

//slideHight = slide[0].offsetHeight;         //첫번째 슬라이드의 높이를 가져온다

const calculateTallestSlide = () => {
    for (let i = 0; i < slide.length; i++) {
        if (slideHight < slide[i].offsetHeight) {
            slideHight = slide[i].offsetHeight
        }
    }

    slidrWeaper.style.height = `${slideHight}px`;
    slideContainer.style.height = `${slideHight}px`;
}

calculateTallestSlide()

for (let i = 0; i < slide.length; i++) {
    slide[i].style.left = `${i * 100}%`;
}

// 슬라이드 이동 함수 
const goToSlide = (index) => {
    slideContainer.style.left = `${index * -100}%`;
    slideContainer.classList.add("animated");
    currentIndex = index;
}

// }
const endPrev = () => {
    //처음일 때 < 버튼 없애기
    if (currentIndex === 0) {
        navPrev.classList.add("disabled");
    } else {
        //이게 없으면 위에서 disabled 계속 남아서 끝에 한번 갔다 오면 >이 계속 사라진 상태임
        navPrev.classList.remove("disabled");
    }
}

const endNext = () => {
    //마지막 일때 > 버튼 업애기
    if (currentIndex === slide.length - 1) {
        navNext.classList.add("disabled");
    }
    else {
        navNext.classList.remove("disabled");
    }
}

const movePrev = (event) => {
    event.preventDefault();
    //처음이 아닐때만 작동해야한다.

    //처음으로 가면 버튼 없애는 기능
    //goToSlide(currentIndex - 1);
    //endPrev();

    //처음인데 < 버튼 눌러서 마지막으로 돌아감
    //처음이라면 goToSlide() 실행
    if (currentIndex === 0) {
        goToSlide(slide.length - 1)
    } else {
        goToSlide(currentIndex - 1);
    }
}

const moveNext = (event) => {
    event.preventDefault();
    //마지막이 아닐때만 작동해야한다.

    //마지막으로 가면 버튼 없애는 기능
    //goToSlide(currentIndex + 1);
    //endNext()

    //마지막인데 > 버튼 눌러서 처음으로 돌아감
    if (currentIndex === slide.length - 1) {
        goToSlide(0)
    } else {
        goToSlide(currentIndex + 1);
    }
}


// 버튼을 클릭하면 슬라이드 이동시키기
navPrev.addEventListener("click", movePrev);
navNext.addEventListener("click", moveNext);

// // 첫번째 슬라이드 먼저 보이도록 하기
goToSlide(0)