슬라이드 이펙트07

이미지1

이미지2

이미지3

이미지4

이미지5

소스 보기

Javascript

HTML

CSS

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");   // play 버튼
// const sliderBtnStop = document.querySelector(".slider__dot .stop");   // 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,    // 3초
    sliderTimer = "";

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

function autoPlay() {
    sliderTimer = setInterval(() => {
        let intervalNum = currentIndex + 1; // currentIndex 값이 계속 증가해야 하니까
        gotoSlider(intervalNum)
    }, interval)    // 3초에 한 번씩 반복   
}

function stopPlay() {
    clearInterval(sliderTimer); // clearInterval => setinterval 막아주기
}

function imgClone() {
    sliderInner.appendChild(cloneFirst);     // appendChild(마지막 자식) => sliderInner의 마지막 자식에 첫 번째 이미지 복사
    sliderInner.insertBefore(cloneLast, sliderFirst);
}

function createDot() {
    for (let i = 0; i < sliderLength; i++) {                // for문 이용해서 닷메뉴 추가
        dotIndex += "<a href='#'' class='dot'>이미지1</a>";
    }
    dotIndex += "<a href='#'' class='play'></a>"    // play 버튼
    dotIndex += "<a href='#'' class='stop'></a>"    // stop 버튼
    sliderDot.innerHTML = dotIndex;
    sliderDot.firstChild.classList.add("active");       // 첫 번째 이미지에만 active 생기게
}

function gotoSlider(index) {
    sliderInner.classList.add("transition");    // transition 효과 css로 주기
    let posInitial = sliderInner.offsetLeft;    // -800

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

    currentIndex = index;           // 현재 이미지에 index값 넣어서 계속 증가하게
}

function checkIndex() {
    sliderInner.classList.remove("transition");     // 순간이동 할 때는 transition 효과 제거

    // 마지막 이미지
    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")); // 1. 닷메뉴 클래스 모두 삭제

    dotActive[currentIndex].classList.add("active");    // 2. 해당 이미지의 해당 닷메뉴에 클래스 추가
}

// prev 버튼 클릭하면
sliderBtnPrev.addEventListener("click", () => {
    let prevIndex = currentIndex - 1;
    gotoSlider(prevIndex);
});

// next 버튼 클릭하면
sliderBtnNext.addEventListener("click", () => {
    let nextIndex = currentIndex + 1;
    gotoSlider(nextIndex);
});

// 재생 버튼 클릭하면
document.querySelector(".slider__dot .play").addEventListener("click", () => {
    // alert("ddd")
    document.querySelector(".slider__dot .play").style.display = "none";
    document.querySelector(".slider__dot .stop").style.display = "inline-block";
    autoPlay();
})

// 정지 버튼 클릭하면
document.querySelector(".slider__dot .stop").addEventListener("click", () => {
    // alert("ddd")
    document.querySelector(".slider__dot .stop").style.display = "none";
    document.querySelector(".slider__dot .play").style.display = "inline-block";
    stopPlay();
})

// 닷 버튼 클릭했을 때 해당 닷버튼의 이미지로 이동
document.querySelectorAll(".slider__dot .dot").forEach((dot, index) => {        // 위에서 이미 쓴 선택자지만 지역변수라 못 씀
    dot.addEventListener("click", () => {
        gotoSlider(index);
    })
})

sliderInner.addEventListener("mouseenter", stopPlay);  // 마우스 오버하면 자동재생 멈추게
sliderInner.addEventListener("mouseleave", autoPlay);  // 마우스 떼면 다시 자동재생
sliderInner.addEventListener("transitionend", checkIndex);  // transitionend : transition이 끝났을 때 => transition이 끝나면 순간이동 위해 checkIndex 함수 실행

<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_bg14-min.jpg" alt="이미지1">
                    </div>
                    <div class="slider s2"><span>이미지2</span><img src="../assets/img/effect_bg15-min.jpg" alt="이미지2">
                    </div>
                    <div class="slider s3"><span>이미지3</span><img src="../assets/img/effect_bg16-min.jpg" alt="이미지3">
                    </div>
                    <div class="slider s4"><span>이미지4</span><img src="../assets/img/effect_bg17-min.jpg" alt="이미지4">
                    </div>
                    <div class="slider s5"><span>이미지5</span><img src="../assets/img/effect_bg18-min.jpg" alt="이미지5">
                    </div>
                </div>
            </div>
            <div class="slider__btn">
                <button href="#" class="prev" role="button" aria-label="왼쪽 이미지">prev</button>
                <button href="#" class="next" role="button" aria-label="오른쪽 이미지">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>

/* 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;
}

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

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

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

.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: 260px;
    }

    #header {
        line-height: 1.4;
    }
}

.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: all;
    border: 0;
    cursor: pointer;
}

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

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

.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: inline-block;
    width: 23px;
    height: 20px;
    margin-left: 7px;
    vertical-align: -6px;
    border-left: 14px solid #fff;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    display: none;
}

.slider__dot .stop {
    display: inline-block;
    width: 18px;
    height: 19px;
    vertical-align: -6px;
    position: relative;
    margin-left: 7px;
}

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

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