sliderEffect07 - 무한 + 닷 + 버튼

무한

여기서 무한이란, 무한 재생의 이미보단

계속계속 이미지가 옆으로 무한히 생성되는 것이다

 

그래서 무한히 보인다는 것이다

 

JavaScript

let sliderLast = slider[sliderLength - 1]; //마지막이미지
let cloneFirst = sliderFirst.cloneNode(true); //첫번째 이미지 복사
let cloneLast = sliderLast.cloneNode(true); //마지막 이미지 복사

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

 

닷

닷버튼은 자바스크립트로 뚝딱뚝딱

JavaScript

function dotInit(){
    for(let i = 0; i < sliderLength; i++){
        dotIndex += "<a href='#' class='dot'></a>";
    }
    sliderDot.innerHTML = dotIndex;
    sliderDot.firstElementChild.classList.add("active");
}

 

버튼

누르면 옆으로 가는데 이는 left 값을 조정해주면 된다

// 이미지 움직이기
function gotoSlider(direction){
    sliderInner.classList.add("transition");
    posInitial = sliderInner.offsetLeft;
    console.log(posInitial);

    //오른쪽 버튼
    if(direction == 1){
        //left: -800px
        sliderInner.style.left = (posInitial + -sliderWidth) + "px";
        currentIndex++;
    }
    //왼쪽 버튼
    if(direction == -1){
        sliderInner.style.left = (posInitial + sliderWidth)  + "px";
        currentIndex--;
    }

    dotActive();
}