Slide Effect - 컨트롤 버튼

const sliderWrap = document.querySelector(".slider__wrap");
const sliderImg = document.querySelector(".slider__img");
const sliderInner = document.querySelector(".slider__inner");
const slider = document.querySelectorAll(".slider");
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 = 1000;

//이미지 복사
sliderInner.appendChild(cloneFirst);
sliderInner.insertBefore(cloneLast, sliderFirst);


//닷 메뉴 셋탕
function dotInit(){
    for(let i=0; i<sliderLength; i++){
        dotIndex += "";
    }
    dotIndex += "play";
    dotIndex += "stop";
    sliderDot.innerHTML = dotIndex;
    sliderDot.firstElementChild.classList.add("active");
}
dotInit();

dotActive = document.querySelectorAll(".slider__dot .dot");
//이미지 움직이기
function gotoSlider(index){

    dotActive.forEach(el => {
        el.classList.remove("active");
    });

    if(index == sliderLength){
        dotActive[0].classList.add("active");
    }else {
        dotActive[index].classList.add("active");
    }

    sliderInner.classList.add("transition");
    sliderInner.style.left = -sliderWidth * (index+1) + "px";

    console.log(currentIndex);
    currentIndex = index;

    //두 번째 이미지 : left: -1600px
    //세 번째 이미지 : left: -2400px
    //네 번째 이미지 : left: -3200px
    //다섯 번째 이미지 : left: -4000px
}



document.querySelectorAll(".slider__dot .dot").forEach((dot, index) => {
    dot.addEventListener("click", () => {
        gotoSlider(index);
    })
})

//자동재생
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 nextIndex = currentIndex + 1;
    gotoSlider(nextIndex);
});

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", () => {
    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(".stop").classList.remove("show");
    document.querySelector(".play").classList.add("show");
    stopPlay();
});

 

무한 슬라이드 효과 사이트