sliderEffect07

 

sliderEffect07 - 이미지 슬라이드(슬라이드 1~6 모든 기능 추가))

여태까지의 모든 슬라이드 이펙트의 효과들을 추가하여 볼까요?

---

참고

슬라이드 이펙트 07 페이지 우측하단 소스 보기를 클릭하시면 JAVASCRIPT, HTML, CSS를 확인할 수 있습니다.

원본 소스 보기 메인 페이지 보기

JAVASCRIPT

각 선택자와 변수를 저장, 실행용 함수를 만들어주고, 자동재생 함수와 일시정지 버튼에 기능을 활성화 하기위해 clearInterval을 사용하여 autoplay함수의 setInterval을 초기화 시킵니다.
이미지 순간이동 효과를 위해 첫 이미지의 앞, 끝 이미지의 뒤에 클론 이미지를 생성합니다. 이미지의 갯수에 따라 닷 버튼을 생성하고, 재생-일시정지 버튼에 이벤트를 부여합니다.
슬라이드 이동 px값을 설정하고 인덱스값에 따라서 다음, 이전 이미지로 넘어가도록하고 닷 버튼이 이미지의 index값에 따라 active클래스가 추가되도록 합니다.
이전, 다음 버튼에 클릭 이벤트를 추가하고 이미지 위에 마우스 포인터를 올리거나, 벗어남에 따라 이미지 애니메이션이 정지, 진행 되도록 합니다.

const sliderWrap = document.querySelector(".slider__wrap");
const sliderImg = document.querySelector(".slider__img"); // 보여지는 영역
const sliderInner = document.querySelector(".slider__inner"); // 움직이는 영역
const slider = document.querySelectorAll(".slider"); // 각각 이미지
const sliderDot = document.querySelector(".slider__dot"); // 닷 메뉴
const sliderBtn = document.querySelector(".slider__btn"); // 버튼
const sliderBtnPrev = document.querySelector(".slider__btn .prev"); // 왼쪽 버튼
const sliderBtnNext = document.querySelector(".slider__btn .next"); // 오른쪽 버튼
const sliderBtnPlay = document.querySelector(".slider__dot .play"); // 재생 버튼
const sliderBtnStop = document.querySelector(".slider__dot .stop"); // 정지 버튼

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

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

function autoplay() {
    sliderTimer = setInterval(() => {
        let intervalNum = currentIndex + 1;
        gotoSlider(intervalNum);
    }, interval);
}

function stopPlay() {
    clearInterval(sliderTimer);
}

function imgClone() {
    sliderInner.appendChild(cloneFirst);
    sliderInner.insertBefore(cloneLast, sliderFirst);
}

function createDot() {
    for (let i = 0; i < sliderLength; i++) {
        dotIndex += "<a href='#' class='dot'>이미지1</a>";
    }
    dotIndex += "<a href='#' class='stop'></a>";
    dotIndex += "<a href='#' class='play'></a>";

    sliderDot.innerHTML = dotIndex;
    // 첫 번째 닷 버튼에 활성화 표시(active)
    sliderDot.firstElementChild.classList.add("active");
    // firstElementChild : 첫 번째 요소를 선택 = firstChild

    document.querySelector(".stop").addEventListener("click", () => {
        document.querySelector(".stop").style.display = "none";
        document.querySelector(".play").style.display = "inline-block";
        stopPlay();
    });

    document.querySelector(".play").addEventListener("click", () => {
        document.querySelector(".stop").style.display = "inline-block";
        document.querySelector(".play").style.display = "none";
        autoplay();
    });
}

function gotoSlider(index) {
    sliderInner.classList.add("transition");
    let posInitial = sliderInner.offsetLeft; // -800

    sliderInner.style.left = -sliderWidth * (index + 1) + "px";

    currentIndex = index;
}

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

    // console.log(currentIndex);

    // 마지막 이미지
    if (currentIndex == slider.length) {
        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");
}

sliderBtnPrev.addEventListener("click", () => {
    let prevIndex = currentIndex - 1;
    gotoSlider(prevIndex);
});
sliderBtnNext.addEventListener("click", () => {
    let nextIndex = currentIndex + 1;
    gotoSlider(nextIndex);
});

sliderInner.addEventListener("mouseenter", stopPlay);
sliderInner.addEventListener("mouseleave", autoplay);
sliderInner.addEventListener("transitionend", checkIndex);