[자바스크립트 응용하기] 슬라이드 유형07

슬라이드 효과 07

이번 시간에는 슬라이드 효과의 최종형태입니다. 그런데 지금 자잘한 버그가 많아서 수정중에 있습니다...
심지어 현생이 최근에 너무 바빠져서 수정할 시간이...😪
수정이 완료되는대로 설명을 제대로 덧붙여서 수정본으로 재업로드 하겠습니다.

---

원본 소스 보기 원본 사이트

---

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

JS 소스

const sliderWrap = document.querySelector('.slider__wrap');
const sliderImg = document.querySelector('.slider__img');
const sliderInner = document.querySelector('.slider__inner');
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 sliderWidth = sliderImg.offsetWidth, 	// 이미지 가로 값
    dotIndex = "",
    interval = 3000,						// setInterval 컨트롤 용 (3 초)
    sliderTimer = "";						// setInterval 컨트롤 용, 빈문자열 변수 선언해놓기
let sliderLength = document.querySelectorAll('.slider').length;

function init(){
    createDot();	// 닷 버튼 생성 
    imgClone();		// 이미지 복사
}
init();

window.addEventListener("load",()=>{		// 창 실행되면 오토플레이 실행시키기 위함. init()에만 쓰면 무한실행
    autoPlay();		// 자동 플레이
})

// 닷메뉴 만들기
function createDot(){
    for (i = 1; i <= sliderLength; i++) {
        dotIndex += `<a href='#' class='dot'>이미지${i}</a>`;		//이미지갯수만큼 닷 만들기
    }
    dotIndex += '<a href="#" class="play"></a>';					//오토플레이,정지를 위해 추가됨
    dotIndex += '<a href="#" class="stop"></a>';
    sliderDot.innerHTML += dotIndex;								//만든 구문 태그형식으로 넣기
    sliderDot.firstElementChild.classList.add("active");			//첫번째이미지에 클래스 부여
}

function imgClone(){
    let sliderFirst = document.querySelectorAll('.slider')[0],			 	// 첫번째 이미지
        sliderLast = document.querySelectorAll('.slider')[sliderLength - 1],	// 마지막 이미지
        cloneFirst = sliderFirst.cloneNode(true),	// 첫번째 이미지 복사
        cloneLast = sliderLast.cloneNode(true);		// 마지막 이미지 복사
    sliderInner.appendChild(cloneFirst);			//첫번째 이미지 복사해서 뒤에 넣기
    sliderInner.insertBefore(cloneLast, sliderFirst);	//마지막이미지를 첫번째이미지 이전(앞)에 넣음
    sliderLength = document.querySelectorAll('.slider').length;		//변경된 전체길이 값 다시 대입
}
// 이미지 총 길이 넣기
sliderInner.style.width = (sliderWidth * (sliderLength)) + "px";		// 가변되는 이미지 갯수때문에 자바스크립트로 해결
const slider = document.querySelectorAll('.slider');					// 슬라이드 컨트롤 때문에 이미지 갯수를 함수 실행 이후로 미룸

function autoPlay(){
    sliderTimer = setInterval(()=>{				// 셋인터벌 실행시킴
        let intervalNum = currentIndex+1;		// 복사된 값때문에 시작값은 1임,
        console.log(intervalNum)
        console.log(sliderLength)
        if(intervalNum == sliderLength-1)intervalNum = 0;			// 마지막 이미지에서 다음이미지 넘어가는 과정에 0으로 초기화
        gotoslider(intervalNum);				// 슬라이더 이동함수에 변경된 인덱스 부여
    }, interval);								// 언제? 3초마다 (ex_ 최초 로드시 0->1 되는 과정이 3초후에 일어남.)
}

function stopPlay(){
    clearInterval(sliderTimer);				// 셋인터벌 중지
}

function gotoslider(index){
    sliderInner.classList.add("transition");		// 트랜지션효과부여하기위해서 사용
    let posInitial = sliderInner.offsetLeft;		// -800px

    sliderInner.style.left = -sliderWidth * (index + 1) + "px";
    
    currentIndex = index;
    if(index >= 9){
        index==0;
    }
    // 닷 메뉴도 같이 이동
    document.querySelectorAll(".slider__dot .dot").forEach(el => el.classList.remove("active"));
    document.querySelectorAll(".slider__dot .dot")[index].classList.add("active");    


}


function checkIndex(){
    sliderInner.classList.remove("transition");			//트랜지션 css를 일시적으로 지움
    sliderBtn.classList.add("disable");					//버그 방지용 

    if(currentIndex == sliderLength){
        sliderInner.style.left = -(1 * sliderWidth) + "px";
        currentIndex = 0;
    }

    if(currentIndex == -1){
        sliderInner.style.left = -(sliderLength * sliderWidth) + "px";
        currentIndex = sliderLength -1;
    }
}


sliderBtnPrev.addEventListener("click", () => {
    let prevIndex = currentIndex - 1;
    if(prevIndex == -1){
        prevIndex = sliderLength-1;					//1번이미지에서 이전버튼 시 마지막 이미지의 인덱스값으로 변경
    }
    gotoslider(prevIndex);
})
sliderBtnNext.addEventListener("click", () => {
    let nextIndex = currentIndex + 1;
    if(nextIndex == sliderLength){
        nextIndex = 0;						//마지막에서 다음 버튼 시 인덱스 0(첫번재)로 강제변경
    }
    gotoslider(nextIndex);
})


sliderInner.addEventListener("mouseenter", stopPlay);		//이미지영역(일렬로 되어있음)에 마우스 오버시 오토플레이 정지 
sliderInner.addEventListener("mouseleave", autoPlay);		//위에랑 반대
sliderInner.addEventListener("transitionend", checkIndex);	//이너에 있는 트랜지션효과가 끝나면 자동으로 인덱스체크가 실행되게 
const sliderPlay = document.querySelector('.slider__dot .play');
const sliderStop = document.querySelector('.slider__dot .stop');
sliderPlay.addEventListener("click",()=>{
    autoPlay();
    sliderPlay.style.display = "none";
    sliderStop.style.display = "inline-block";
});
sliderStop.addEventListener("click",()=>{
    stopPlay();
    sliderStop.style.display = "none";
    sliderPlay.style.display = "inline-block";
});

// 닷 버튼 클릭했을 때 해당 닷버튼의 이미지로 이동 
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');
        gotoslider(index);
        // sliderInner.style.left = `${-((index + 1) * sliderWidth)}px`;
        // sliderInner.classList.add("transition")
        // currentIndex = index;
    });
});	

■ 핵심 찍먹하기🪓

---

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