슬라이드 이펙트06

이미지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");   // 오른쪽 버튼

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

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

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

function gotoSlider(direction) {
    sliderInner.classList.add("transition");    // 평소에는 transition 됐다가 순간이동 했을때는 안되게
    sliderBtn.classList.add("disable");
    posInitial = sliderInner.offsetLeft;    // 이미지를 왼쪽으로 이동하게 했기 때문에 offsetLeft 값을 구해 넣어준다.
    // console.log(posInitial)  => 값이 나오는지 확인

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

    dotActive[currentIndex].classList.add("active");    // 2. 개별의 닷메뉴에 클래스 추가
}

// 닷 버튼 클릭했을 때 해당 닷버튼의 이미지로 이동 
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이 끝났을 때 => transition이 끝나면 순간이동 위해 checkIndex 함수 실행

<main id="main">
    <section id="sliderType03">
        <div class="slider__wrap">
            <div class="slider__img">
                <div class="slider__inner">
                    <div class="slider" role="group" aria-label="1/5"><img src="../assets/img/effect_bg11-min.jpg"
                            alt="이미지1"></div>
                    <div class="slider" role="group" aria-label="2/5"><img src="../assets/img/effect_bg12-min.jpg"
                            alt="이미지2"></div>
                    <div class="slider" role="group" aria-label="3/5"><img src="../assets/img/effect_bg13-min.jpg"
                            alt="이미지3"></div>
                    <div class="slider" role="group" aria-label="4/5"><img src="../assets/img/effect_bg14-min.jpg"
                            alt="이미지4"></div>
                    <div class="slider" role="group" aria-label="5/5"><img src="../assets/img/effect_bg15-min.jpg"
                            alt="이미지5"></div>
                </div>
            </div>
            <div class="slider__btn">
                <a href="#" class="prev" role="button" aria-label="왼쪽 이미지">prev</a>
                <a href="#" class="next" role="button" aria-label="오른쪽 이미지">next</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);
}