sliderEffect08 - 무한, 버튼 추가, 닷 버튼 추가, 자동플레이, 시작버튼, 정지버튼

const sliderWrap = document.querySelector(".slider__wrap");
const sliderImg = document.querySelector(".slider__img"); // 이미지 보이는 영역
const sliderInner = document.querySelector(".slider__inner"); // 이미지 움직이는 영역
const slider = document.querySelectorAll(".slider"); // 5개의 이미지
const sliderBtn = document.querySelector(".slider__btn") // 버튼
const sliderBtnPrev = sliderBtn.querySelector(".prev") // 왼쪽 버튼
const sliderBtnNext = sliderBtn.querySelector(".next") // 오른쪽 버튼
const sliderDot = document.querySelector(".slider__dot")  //닷 버튼

let currentIndex = 0;                       // 첫번째 이미지
let sliderWidth = sliderImg.offsetWidth;    // 이미지 가로값
let sliderLength = slider.length;  // 이미지 갯수
let sliderFirst = slider[0];    // 첫번째 이미지
let sliderLast = slider[sliderLength-1];    // 마지막 이미지
let cloneFirst = sliderFirst.cloneNode(true);   // 첫번째 이미지 복사
let cloneLast = sliderLast.cloneNode(true);     // 마지막 이지미 복사
let posInitial ="";
let dotIndex = "";
let sliderTimer = "";
let interval = 3000;


// 이미지 복사 (제이쿼리: appendTo/prependTo : append/prepend)
sliderInner.appendChild(cloneFirst); 
sliderInner.insertBefore(cloneLast, sliderFirst); 

// 이미지 움직이기
function gotoslider(index){
    sliderInner.classList.add("transition");
    // 1 2 3 4 5
    sliderInner.style.left = -sliderWidth * (index+1) + "px";
    console.log(currentIndex);
    currentIndex = index;
    // 두번째 이미지 : left : -1600
    // 세번째 이미지 : left : -2400
    // 네번째 이미지 : left : -3200
    // 다섯번째 이미지 : left : -4000
};

//이미지 갯수만큼 dot을 추가
function dotInit(){
    for(let i=0; i<<<sliderLength; i++){
        dotIndex += "<<<a href='#' class='dot'><<</a>"
    }
    dotIndex += "<<a href='#' class='play'>play<</a>"
    dotIndex += "<a href='#' class='stop show'>stop</a>"
    sliderDot.innerHTML = dotIndex;
    sliderDot.firstElementChild.classList.add("active");
}
dotInit();


// 자동플레이
function autoPlay(){
    sliderTimer = setInterval(()=>{
        gotoslider(currentIndex + 1);
    }, interval);
};
autoPlay();

// 자동플레이 멈춤
function stopPlay(){
    clearInterval(sliderTimer);
};

    // 왼쪽 버튼
sliderBtnPrev.addEventListener("click", ()=>{
    let prevIndex = currentIndex - 1;
    gotoslider(prevIndex);
});

    // 오른쪽 버튼
sliderBtnNext.addEventListener("click", ()=>{
    let prevIndex = currentIndex + 1;
    gotoslider(prevIndex);
});

// 애니메이션 종료 후
sliderInner.addEventListener("transitionend", ()=>{
    sliderInner.classList.remove("transition");
    // 이미지 시작 부분
    if(currentIndex == -1){
        sliderInner.style.left = -(sliderLength * sliderWidth) + "px"
        currentIndex = sliderLength - 1;
    }
    // 이미지 마지막 부분
    if(currentIndex == sliderLength){
        sliderInner.style.left = -(1 * sliderWidth) + "px"
        currentIndex = 0;
    }
});

// 마우스가 이미지에 올라가면
sliderInner.addEventListener("mouseenter", ()=>{
    stopPlay();
})
// 마우스가 이미지에서 떨어지면
sliderInner.addEventListener("mouseleave", ()=>{
    autoPlay();
})

sliderInner.addEventListener("mouseleave", () => {
    if(document.querySelector(".play").classList.contains("show")){
        stopPlay();
    } else {
        autoPlay();
    }
})

// 플레이 버튼을 눌렀을 때
document.querySelector(".play").addEventListener("click",()=>{
    document.querySelector(".play").classList.remove("show");
    document.querySelector(".stop").classList.add("show")
    autoPlay();
});

// 정지 버튼을 눌렀을 때
document.querySelector(".stop").addEventListener("click",()=>{
    document.querySelector(".play").classList.add("show");
    document.querySelector(".stop").classList.remove("show")
    stopPlay();
});