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 = "";
console.log(sliderWidth);
//이미지 복사
sliderInner.appendChild(cloneFirst);
sliderInner.insertBefore(cloneLast, sliderFirst);
//이미지 움직이기
function gotoSlider(direction){
    sliderInner.classList.add("transition");
    posInitial = sliderInner.offsetLeft;
    console.log(posInitial)
    //오른쪽 버튼
    if(direction == 1){
        sliderInner.style.left = (posInitial - sliderWidth) + "px";
        currentIndex++;
    }
    //왼쪽 버튼
    if(direction == -1){
        sliderInner.style.left = (posInitial + sliderWidth) + "px";
        currentIndex--;
    }
    dotActive();
}
//닷 버튼
function dotInit(){
    for(let i=0; i<sliderLength; i++){
        dotIndex += "";
    }
    sliderDot.innerHTML = dotIndex;
    sliderDot.firstElementChild.classList.add("active");
}
// 닷 버튼 활성화
function dotActive(){
    let dotAll = document.querySelectorAll(".slider__dot .dot");
    dotAll.forEach(dot => {             //전체 닷 메뉴 비활성화
        dot.classList.remove("active");
    });
    //마지막 이미지 왔을 때
    if(currentIndex == sliderLength){
        dotAll[0].classList.add("active");
    } else if (currentIndex == -1) {
        dotAll[sliderLength -1].classList.add("active");
    } else {
        dotAll[currentIndex].classList.add("active");
    }
}
//애니메이션 완료 후
function checkIndex(){
    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;
    }
}
//버튼 클릭하기
sliderBtnPrev.addEventListener("click", () => {gotoSlider(-1)});
sliderBtnNext.addEventListener("click", () => {gotoSlider(1)});
sliderInner.addEventListener("transitionend", checkIndex);
dotInit();

 

무한 슬라이드 효과 사이트