무한루프 slide , pre next 버튼 만들어보기

const eventSlideclone1 = eventSlide[0].cloneNode(true)
const eventSlidelast = eventSlide[eventSlide.length-1].cloneNode(true)
slideul.insertBefore(eventSlidelast, eventSlide[0])
slideul.append(eventSlideclone1)

const eventSlideClone = document.querySelectorAll(".slide > li")
const liwide = eventSlideClone[0].clientWidth
const sliderWidth = liwide * eventSlideClone.length;

let translate = 0
let eventcount = 1

translate = -liwide
slideul.style.transform = `translateX(${translate}px)`;
slideul.style.width = `${sliderWidth}px`

function change(){
    slideul.style.transition = 'none'
    eventcount = 1
    translate = -liwide
    slideul.style.transform = `translateX(${translate}px)`
}

function eventSlide1() {
    eventcount++
    translate += -liwide;
    slideul.style.transform = `translateX(${translate}px)`;
    slideul.style.transition = `all 1000ms`
    if (eventcount === eventSlideClone.length -1)
        {setTimeout(change, 1000)}
}

let eventInterval = 0
eventInterval = setInterval(eventSlide1, 5000)

function eventbtnHandler(e){
    const target = e.target
    clearInterval(eventInterval)
    if (target.className === "eventpre"){
        eventcount--
        translate += liwide
        slideul.style.transform = `translateX(${translate}px)`
            if(eventcount === 0){
                setTimeout(function(){
                    slideul.style.transition = "none"
                    eventcount = eventSlideClone.length -2
                    translate = -(liwide * eventcount)
                    slideul.style.transform = `translateX(${translate}px)`
                }, 1000)
            }slideul.style.transition = `all 1000ms`
    } else if (target.className === "eventnext"){
        eventcount++
        translate -= liwide
        slideul.style.transform = `translateX(${translate}px)`
            if (eventcount === eventSlideClone.length -1)
            {setTimeout(change, 1000)}
            slideul.style.transition = `all 1000ms`
    }
    eventInterval = setInterval(eventSlide1, 5000)
}

btnbox.addEventListener("click", eventbtnHandler)

기본 개념 : 맨 앞장과 맨 뒷장의 클론을 생성 // 맨 앞장 클론 >> 맨뒤로 // 맨 뒷장 클론 >> 맨 앞장으로 새로 배열을 만든다.

배열을 새로 만들었기 때문에 하나의 변수에 배열을 담고. 맨뒤(맨앞장클론) 이 됐을 때 맨 앞장슬라이드, 전체 슬라이드를  빠르게 불러온다. 

 

연결이 되면 자연스럽게 무한루프 슬라이드가 만들어진다.

 

const eventSlideclone1 = eventSlide[0].cloneNode(true)
const eventSlidelast = eventSlide[eventSlide.length-1].cloneNode(true)

 

clone.Node(true) 를 사용하면 똑같은 기능을 가진 배열이 하나 복제가 된다. 

이를 이용해서 맨 앞장과 맨 뒷장을 복사를 해서 변수에 담는다.

slideul.insertBefore(eventSlidelast, eventSlide[0])
slideul.append(eventSlideclone1)

 

맨 앞에 맨 뒷장을 붙인다 . 이 때 insertBefore은 (변수, 붙일위치) 로 설정해주어야한다.

appen는 붙일 변수만 설정해두면 알아서 뒤로 붙는다.

 

const liwide = eventSlideClone[0].clientWidth

 

clientWidth를 사용하면 해당 엘리먼트의 width 값을 가져올 수 있다 이를 이용해 liwide 변수에 값을 담아준다.

 

function change(){
    slideul.style.transition = 'none'
    eventcount = 1
    translate = -liwide
    slideul.style.transform = `translateX(${translate}px)`
}

 

핵심 내용이다.

transition 이벤트를 없애고 1번 슬라이드의 위치로 옮겨주기 때문에 무한루프를 가능하게 만든다.

그 외 코드들은 기존 슬라이드와 똑같다.