[자바스크립트 응용하기] 슬라이드 유형06_ 닷메뉴 무한으로돌리기

슬라이드 효과 06

이번 시간에는 5유형에서 만들었던 닷메뉴를 무한으로 왔다갔다 만들어 보겠습니다.
근데 사실 4유형에서 한것과 별다를게 없어서 쓸 내용도 없고 이 유형은 버그가 참많아요 ^_^

---

원본 소스 보기 원본 사이트

---

▶ 동그란 도트모양을 만들어주고 이 닷버튼에 JS를 부여해줍니다.
이 때 Index값을 잘 활용하면 아주 쉽게 닷형식의 슬라이더가 완성이 됩니다.

JS 소스

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('.slider__btn .prev');
const sliderBtnNext = sliderBtn.querySelector('.slider__btn .next');
const sliderDot = document.querySelector('.slider__dot');

let currentIndex = 0;
let sliderLength = slider.length;
let sliderWidth = sliderImg.offsetWidth; 	// 이미지 가로 값
let sliderFirst = slider[0],			 	// 첫번째 이미지
    sliderLast = slider[sliderLength - 1],	// 마지막 이미지
    cloneFirst = sliderFirst.cloneNode(true),	// 첫번째 이미지 복사
    cloneLast = sliderLast.cloneNode(true);		// 마지막 이미지 복사
dotIndex = "";

// 이미지 총 길이 넣기
sliderInner.style.width = (sliderWidth * (sliderLength + 3)) + "px";



sliderInner.appendChild(cloneFirst);
sliderInner.insertBefore(cloneLast, sliderFirst);

function init() {
    // 이미지 수만큼 dot 추가
    for (let i = 0; i < sliderLength; i++) {                
        dotIndex += "<a href='#' class='dot'>이미지1</a>";
    }
    sliderDot.innerHTML = dotIndex;
    sliderDot.firstChild.classList.add("active");       // 첫 번째만 + active
}
init();

function gotoSlider(direction) {
    sliderInner.classList.add("transition");    
    sliderBtn.classList.add("disable");
    posInitial = sliderInner.offsetLeft;    
    

    if (direction == -1) {
        sliderInner.style.left = (posInitial + sliderWidth) + "px"; // 초기화
        currentIndex--;
    } else if (direction == 1) {
        sliderInner.style.left = (posInitial - sliderWidth) + "px"; // 초기화
        currentIndex++;
    }
}

function checkIndex() {
    sliderInner.classList.remove("transition");
    console.log(currentIndex);

    // 마지막 - >처음
    if (currentIndex == sliderLength) {
        sliderInner.style.left = -(1 * sliderWidth) + "px";
        currentIndex = 0;
    }

    // 처음 -> 마지막
    if (currentIndex == -1) {
        sliderInner.style.left = -(sliderLength * sliderWidth) + "px";
        currentIndex = sliderLength - 1;
    }

    let dotActive = document.querySelectorAll(".slider__dot .dot"); 
    dotActive.forEach(el => el.classList.remove("active")); 

    dotActive[currentIndex].classList.add("active");    
}

// 닷 버튼 클릭했을 때 해당 닷버튼의 이미지로 이동 
document.querySelectorAll('.slider__dot .dot').forEach((a, index) => {
    a.addEventListener('click', e => {
        document.querySelectorAll('.slider__dot .dot').forEach(b => {
            b.classList.remove('active');
        });
        a.classList.add('active');
        sliderInner.style.left = `${-((index + 1) * sliderWidth)}px`;
        sliderInner.classList.add("transition")
        currentIndex = index;
    });
});

// prev 버튼 클릭했을 때
sliderBtnPrev.addEventListener("click", () => {
    gotoSlider(-1)
    setTimeout(() => {
        sliderBtn.classList.remove("disable")
    }, 300);
});

// next 버튼 클릭했을 때
sliderBtnNext.addEventListener("click", () => {
    gotoSlider(1);
    setTimeout(() => {
        sliderBtn.classList.remove("disable")
    }, 300);
});
sliderInner.addEventListener("transitionend", checkIndex);  // transitionend : transition 이 끝났을 때 실행하는 이벤트 

■ 핵심 찍먹하기🪓

✔ transitionend 사용하기

생소한 이친구는 이름 그대로 transition값을 감지해서 transition이 완료된 이후에 발생하는 이벤트 입니다.
checkIndex()함수를 통해서 인덱스값을 감지하고 컨트롤해주는데요. 트렌지션엔드 이벤트를 통해서 sliderInner의 트랜지션이 끝난 뒤 자동으로 실행되게 해주면 간편하겠죠?

---

🙇‍♀️ 틀린 점에 대한 지적은 언제나 환영합니다 🙇‍♂️