[따라만들기] content slider upgrade(auto move)

https://youtu.be/aIq26CBdiaM

 

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

// 변수 지정
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;
let timer = undefined;
let pagerHTML = '';
let pager = document.querySelector(".pager")


//높이를 따로 지정하는 이유는 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()

//슬라이드에 left값 각각 지정하기
for (let i = 0; i < slide.length; i++) {
    slide[i].style.left = `${i * 100}%`;

    pagerHTML += `<span data-idx="${i}">${i + 1}</span>`;           //누적
    pager.innerHTML = pagerHTML;                                    //HTML 태그로 생성
}

const pagerBtn = document.querySelectorAll(".pager span");
//pager.innerHTML = '<span data-idx="0">1</span>';


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

    pagerMoveView(index)
}


//페이저가 이동할때마다 기존에 있던 active 지우고 현재의 인덱스에 active 걸어줌
const pagerMoveView = (index) => {
    //pagerBtn[index].classList.add("active");
    //클릭된 그 요소에만 active 추가
    //1. 모든 요소에 active 빼기
    //2. 내가 클릭한 요소에만 active 넣기
    for (let i = 0; i < pagerBtn.length; i++) {
        pagerBtn[i].classList.remove("active");
        pagerBtn[index].classList.add("active");
    }
}

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);

//자동 슬라이드 함수
const startAutoSlide = () => {
    //자동 슬라이드
    timer = setInterval(function () {
        nextInx = (currentIndex + 1) % (slide.length);
        goToSlide(nextInx);
    }, 2000)
}
/*
slidrWeaper에 마우스가 들어오면 할일, 나가면 할일
clearInterval(대상)
*/

goToSlide(0)
startAutoSlide();

slidrWeaper.addEventListener("mouseenter", () => {
    console.log("mouseenter");
    clearInterval(timer);
});
slidrWeaper.addEventListener("mouseleave", () => {
    console.log("mouseleave");
    startAutoSlide();
});

/*----------pager 이동-------------*/


//pager로 슬라이드 이동하기

for (let i = 0; i < pagerBtn.length; i++) {
    pagerBtn[i].addEventListener("click", (event) => {
        //방법 1 어트리뷰트 data-idx이용
        //let pagerNum = event.target.getAttribute("data-idx");
        //let pagerNum = event.target.dataset.idx;
        //console.log(pagerNum)
        //goToSlide(pagerNum)

        //방법 2 태그 안의 내용을 아용
        //innerText는 내용 반환     a.innerText / a.innerText = "B"     값을 바꾸기
        //innerHTMLdms 태그를 반환  A.innerHTML / A.innerHTM: = "<h2>"  태그를 바꾸기
        let pagerNum = event.target.innerText - 1;
        console.log(pagerNum);
        goToSlide(pagerNum)

        // //클릭된 그 요소에만 active 추가
        // //1. 모든 요소에 active 빼기
        // //2. 내가 클릭한 요소에만 active 넣기
        // for (let i = 0; i < pagerBtn.length; i++) {
        //     pagerBtn[i].classList.remove("active");
        //     event.target.classList.add("active");
        // }

    });
}