sliderEffect07

슬라이드 이펙트 - 이미지 슬라이드(버튼, 닷메뉴, 무한, 플레이 버튼, 정지 버튼, 자동 플레이)

지금까지의 슬라이더를 모두 다룹니다.

원본 소스 보기

원본 사이트

---

html

slider__btn에 prev, next 버튼을 만들어 줍니다. 닷 메뉴 추가를 위해서 slider__dot을 추가합니다. 개별적인 이미지에 slider 클래스를 부여했습니다.

코드보기

<main id="main">
    <section id="sliderType03">
        <div class="slider__wrap">
            <div class="slider__img">
                <div class="slider__inner">
                    <div class="slider s1"><span>이미지1</span><img src="../assets/img/effect_bg01-min.jpg" alt="이미지1">
                    </div>
                    <div class="slider s2"><span>이미지2</span><img src="../assets/img/effect_bg02-min.jpg" alt="이미지2">
                    </div>
                    <div class="slider s3"><span>이미지3</span><img src="../assets/img/effect_bg03-min.jpg" alt="이미지3">
                    </div>
                    <div class="slider s4"><span>이미지4</span><img src="../assets/img/effect_bg04-min.jpg" alt="이미지4">
                    </div>
                    <div class="slider s5"><span>이미지5</span><img src="../assets/img/effect_bg05-min.jpg" alt="이미지5">
                    </div>
                </div>
            </div>
            <div class="slider__btn">
                <button href="#" class="prev">prev</button>
                <button href="#" class="next">next</button>
            </div>
            <div class="slider__dot">
                <!-- <a href="#" class="dot active">이미지1</a>
                <a href="#" class="dot">이미지2</a>
                <a href="#" class="dot">이미지3</a>
                <a href="#" class="dot">이미지4</a>
                <a href="#" class="dot">이미지5</a> -->
            </div>
        </div>
    </section>
</main>

css

생성한 버튼과 닷 메뉴에 대한 css를 진행합니다.

코드보기

/* slider */
.slider__wrap {
    width: 100%;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.slider__img {
    /* 이미지 보이는 영역 */
    position: relative;
    width: 800px;
    height: 450px;
    overflow: hidden;
}

.slider__inner {
    /* 이미지를 감싸고 있는 부모 : 움직이는 부분 */
    display: flex;
    flex-wrap: wrap;
    width: 10000px;
    height: 450px;
    position: relative;
    left: -800px;
    /* transition: all 0.3s; */
}

.slider__inner.transition {
    transition: all 0.3s;
}

.slider {
    /* 개별적인 이미지 */
    position: relative;
    width: 800px;
    height: 450px;
}

.slider span {
    position: absolute;
    left: 5px;
    top: 5px;
    background: rgba(0, 0, 0, 0.4);
    color: #fff;
    padding: 5px 10px;
}

@media (max-width: 800px) {
    .slider__img {
        width: 400px;
        height: 225px;
    }
}

.slider__btn button {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 50px;
    height: 50px;
    background: rgba(0, 0, 0, 0.4);
    text-align: center;
    line-height: 50px;
    transition: all 0.2s;
    display: block;
    color: #fff;
    pointer-events: auto;
    border: 0;
    cursor: pointer;
}

.slider__btn.disable button {
    pointer-events: none;
}

.slider__btn button:hover {
    border-radius: 50%;
    background: rgba(241, 96, 86, 1);
}

.slider__btn button.prev {
    left: 0;
}

.slider__btn button.next {
    right: 0;
}

.slider__dot {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 20px;
}

.slider__dot .dot {
    width: 20px;
    height: 20px;
    background: rgba(0, 0, 0, 0.4);
    display: inline-block;
    border-radius: 50%;
    text-indent: -9999px;
    transition: all 0.3s;
    margin: 3px;
}

.slider__dot .dot.active {
    background: rgba(255, 255, 255, 0.9);
}

.slider__dot .play {
    display: none;
}

.slider__dot .play.show {
    display: inline-block;
    width: 20px;
    height: 20px;
    margin-left: 7px;
    vertical-align: 3px;
    border-left: 16px solid #fff;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
}

.slider__dot .stop {
    display: none;
}

.slider__dot .stop.show {
    display: block;
    margin-left: 7px;
    display: inline-block;
    width: 16px;
    height: 20px;
    vertical-align: 3px;
    position: relative;
}

.slider__dot .stop::before {
    content: '';
    width: 5px;
    height: 20px;
    background: #fff;
    position: absolute;
    left: 0;
    top: 0;
}

.slider__dot .stop::after {
    content: '';
    width: 5px;
    height: 20px;
    background: #fff;
    position: absolute;
    right: 0;
    top: 0;
}

js

이전 방식에서 주요한 변화는 자동으로 재생 되는 것입니다. 그에 따른 autoPlay가 추가되었고, 플레이와 정지와 페이지를 버튼과 닷 메뉴로 바꾸는 등의 효과가 있습니다. 선택자와 변수 등을 설정합니다. autoPlay()에 let intervalNum = currentIndex + 1은 계속 증가 시키기 위함이며, stopPlay()의 clearInterval(sliderTimer)는 setinterval을 발생하는 것을 일어나지 않게 합니다. 이후에 닷메뉴는 이전처럼 for를 이용하여 만들고 각 이미지에 따른 닷메뉴에 클래스가 추가되는 작업은 checkIndex()함수 내에서 진행합니다. 마지막에 닷 메뉴를 클릭하면 그 위치에 맞게 이동하는 설정을 했습니다.

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,        // 이미지의 X축 크기
    sliderFirst = slider[0]                     // 첫번째 이미지
sliderLast = slider[sliderLength - 1],      // 마지막 이미지
    cloneFirst = sliderFirst.cloneNode(true),   // 첫번째 이미지 복사
    cloneLast = sliderLast.cloneNode(true),     // 마지막 이미지 복사
    dotIndex = "",
    interval = 3000,
    sliderTimer = "";

let dotActive = document.querySelectorAll(".slider__dot .dot");

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

function autoPlay() {
    sliderTimer = setInterval(() => {
        let intervalNum = currentIndex + 1;
        gotoSlider(intervalNum)

        if (intervalNum > 4) {
            let dotActive = document.querySelectorAll(".slider__dot .dot");
            dotActive.forEach(el => el.classList.remove("active"));
            dotActive[0].classList.add("active");
        } else {
            let dotActive = document.querySelectorAll(".slider__dot .dot");
            dotActive.forEach(el => el.classList.remove("active"));
            dotActive[intervalNum].classList.add("active");
        }
    }, interval)
}

function stopPlay() {
    clearInterval(sliderTimer)
}

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

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


    dotIndex += "<a href='#' class='play show'></a>";
    dotIndex += "<a href='#' class='stop'></a>";


    sliderDot.innerHTML = dotIndex;
    sliderDot.firstElementChild.classList.add("active");

}

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");

    // 마지막 이미지
    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;
    gotoSlider(prevIndex);

    console.log(prevIndex)

    if (prevIndex < 0) {
        let dotActive = document.querySelectorAll(".slider__dot .dot");
        dotActive.forEach(el => el.classList.remove("active"));
        dotActive[4].classList.add("active");
    } else {
        let dotActive = document.querySelectorAll(".slider__dot .dot");
        dotActive.forEach(el => el.classList.remove("active"));
        dotActive[prevIndex].classList.add("active");
    }

});

document.querySelectorAll(".slider__dot .dot").forEach((dot, index) => {
    dot.addEventListener("click", () => {
        let dotActive = document.querySelectorAll(".slider__dot .dot");
        dotActive.forEach(el => el.classList.remove("active"));
        dotActive[index].classList.add("active");
        gotoSlider(index);
    })
})

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

    if (nextIndex < 5) {
        let dotActive = document.querySelectorAll(".slider__dot .dot");
        dotActive.forEach(el => el.classList.remove("active"));
        dotActive[nextIndex].classList.add("active");
    } else {
        let dotActive = document.querySelectorAll(".slider__dot .dot");
        dotActive.forEach(el => el.classList.remove("active"));
        dotActive[0].classList.add("active");
    }

});

document.querySelector(".slider__dot .play").addEventListener("click", () => {

    document.querySelector(".slider__dot .stop").classList.add("show")
    document.querySelector(".slider__dot .play").classList.remove("show")
    autoPlay();
})

document.querySelector(".slider__dot .stop").addEventListener("click", () => {

    document.querySelector(".slider__dot .stop").classList.remove("show")
    document.querySelector(".slider__dot .play").classList.add("show")
    stopPlay();
})


// sliderInner.addEventListener("mouseenter", stopPlay)
// sliderInner.addEventListener("mouseleave", autoPlay)
sliderInner.addEventListener("transitionend", checkIndex)