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

 

이번에는 지금까지 했던 모든 슬라이드 이펙트를 넣어보았습니다. 거기에 추가로 자동플레이와 플레이버튼, 정지버튼을 추가하였습니다.
페이지가 로딩되면 슬라이드는 자동으로 재생되며 닷버튼 옆에 정지버튼이 있습니다. 정지버튼을 누르면 슬라이드는 멈추고 정지버튼은 플레이버튼으로 변경됩니다.
그리고 플레이 버튼을 누르면 다시 슬라이드는 오토플레이로 변경됩니다.

//slider08
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 = document.querySelector(".prev");
const sliderBtnNext = document.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;

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

// 이미지 움직이기
function gotoSlider(index){
    sliderInner.classList.add("transition");

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

    console.log(sliderInner)
    currentIndex = index;

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

// 닷 메뉴
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(() => {
        // const intervalNum = currentIndex + 1;
        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 = 0;
    }
    // 마지막 이미지에 왔을 때
    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();
})