Slider Effect 06

슬라이드 이펙트

이번 시간에는 슬라이드 이펙트 - 이미지 슬라이드(버튼, 닷메뉴, 무한) 효과에 대해 알아보겠습니다.
슬라이드가 끝에 가도 부자연스럽게 이동되지 않고 좌우로 무한이동 가능합니다.

---

슬라이드 06

버튼을 통해서 좌우로 이동 가능하고, 5->1 슬라이드로 넘어갈 때 뒤로넘어가지 않고 무한으로 넘어갑니다.

원본 사이트 보기 원본 소스 보기

01. HTML 코드

    <main id="main">
    <section id="sliderType06">
        <div class="slider__wrap">
            <div class="slider__img">
                <div class="slider__inner">
                    <div class="slider s1"><span>이미지1</span><img src="../assets/img/effect_bg11-min.jpg" alt="이미지1"></div>
                    <div class="slider s2"><span>이미지2</span><img src="../assets/img/effect_bg12-min.jpg" alt="이미지2"></div>
                    <div class="slider s3"><span>이미지3</span><img src="../assets/img/effect_bg13-min.jpg" alt="이미지3"></div>
                    <div class="slider s4"><span>이미지4</span><img src="../assets/img/effect_bg14-min.jpg" alt="이미지4"></div>
                    <div class="slider s5"><span>이미지5</span><img src="../assets/img/effect_bg15-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>

02. CSS 코드

    .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;
    }
    /* .slider:nth-child(1)::before {content: '이미지1';}
    .slider:nth-child(2)::before {content: '이미지2';}
    .slider:nth-child(3)::before {content: '이미지3';}
    .slider:nth-child(4)::before {content: '이미지4';}
    .slider:nth-child(5)::before {content: '이미지5';}
    .slider:nth-child(6)::before {content: '이미지1';} */

    @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.25s;
        display: block;
        color: #fff;
        pointer-events: auto;
        border: 0;
        cursor: pointer;
    
    }
    .slider__btn button.disable {
        pointer-events: none;
    }
    .slider__btn button:hover {
        border-radius: 50%;
        background: rgb(50, 109, 227);
    }
    .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);
    }

03. JS 코드

이전 슬라이드유형과 크게 달라진 점은 없습니다.
첫번째 이미지와 마지막 이미지를 복사해서 넣고 이동시킴으로써 자연스럽게 무한히 이동하는것처럼 보이게 해주는 순간이동 효과를 줍니다.

    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);
    sliderInner.insertBefore(cloneLast, sliderFirst);

    function init(){
        for(let i=1; i<=slider.length; i++){
            // sliderDot.innerHTML += "<a href='#' class='dot'>이미지"+i+"</a>";
            dotIndex += "<a href='#' class='dot'>이미지"+i+"</a>";
        }
        sliderDot.innerHTML = dotIndex;
        sliderDot.firstElementChild.classList.add("active");
    }
    init();

    function gotoSlider(direction){
        sliderInner.classList.add("transition");
        sliderBtn.classList.add("disable");

        //각 슬라이드 이미지가 가진 위치는 다르기 때문에 고정값이 아닌 각 이미지의 위치 값인 posInitial을 넣어
        posInitial = sliderInner.offsetLeft;

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

    sliderBtnPrev.addEventListener("click", () => {
        gotoSlider(-1);
        setTimeout(()=>{
            sliderBtn.classList.remove('disable');
        },300);
    });
    sliderBtnNext.addEventListener("click", () => {
        gotoSlider(1);
        setTimeout(()=>{
            sliderBtn.classList.remove('disable');
        },300);
    });

    // 닷 버튼 클릭
    sliderInner.addEventListener("transitionend", checkIndex);

    document.querySelectorAll('.slider__dot a').forEach((a, index) => {
        a.addEventListener('click', e => {
            document.querySelectorAll('.slider__dot a').forEach(b => {
                b.classList.remove('active');
        });
        a.classList.add('active');
        sliderInner.style.left = `${-((index + 1) * sliderWidth)}px`;
        currentIndex = index;
        });
    });