[따라만들기] content_slider(개선전)

https://youtu.be/zBVI-SKRakQ

 

 

// 변수 지정
const sliderWeaper = document.getElementsByClassName("container");
const sliderContainer = document.getElementsByClassName("slider-container");
const slides = document.getElementsByClassName("slide");    //li slide 
let currentIndex = 0;
let topHeihgt = 0;
const navPrev = document.getElementById("prev");
const navNext = document.getElementById("next");

//슬라이드의 높이 확인하여 부모의 높이로 지정하기
//높이를 구해와서 슬라이드 slider-container를 높이를 지정하겠다.
const calculateTallestSlide = () => {
    //slidess의 최대 높이를 구해준다.
    for (let i = 0; i < slides.length; i++) {
        if (topHeihgt < slides[i].offsetHeight) {
            topHeihgt = slides[i].offsetHeight
        }
    }

    //slidess 중 가장 높은 값을 높이로 잡아서 container와 slider-container에 높이를 잡아준다.
    sliderWeaper[0].style.height = `${topHeihgt}px`;
    sliderContainer[0].style.height = `${topHeihgt}px`;
}

calculateTallestSlide()

// 슬라이드가 있으면 가로로 배열하기
//슬라이드 위치가 뭉쳐져 있으므로 이를 left값을 100% 씩 곱해서 옆으로 쭉쭉 이어줌
for (let i = 0; i < slides.length; i++) {
    slides[i].style.left = `${i * 100}%`;
}

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

    //updateNav();            //처음이면 < 버튼 없애기, 마지막이면 > 버튼 없애기
}


// 버튼기능 업데이트 함수
//처음이면 < 버튼 없애기, 마지막이면 > 버튼 없애기
//현재 코드에서는 다시 처음으로, 마지막으로 돌아가기 때문에 사용하지 않음
const updateNav = () => {
    //처음일 때 < 버튼 없애기
    if (currentIndex === 0) {
        navPrev.classList.add("disabled");
    } else {
        //이게 없으면 위에서 disabled 계속 남아서 끝에 한번 갔다 오면 >이 계속 사라진 상태임
        navPrev.classList.remove("disabled");

    }

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



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

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

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

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

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

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