[Vanilla JS] 무한루프 슬라이더 구현

💡 목표

외부 라이브러리를 사용하지 않고, 멈추지 않고 계속 반복하여 보여주는 무한루프 슬라이더 구현

응용하여 띠배너로 사용!
 

📌 HTML

<div>
    <div class="slideWrap">
        <ul class="imgSlide">
            <li>01</li>
            <li>02</li>
            <li>03</li>
            <li>04</li>
            <li>05</li>
            <li>06</li>
        </ul>
    </div>
</div>

 

📌 CSS

/* reset */
section { width: 100%; }
li { display: inline-block; list-style: none; }

/* 슬라이드 */
.slideWrap { display: flex; position: relative; top: 0; left: 0; height: 200px; overflow: hidden;  }
.slideWrap .imgSlide { display: flex; align-items: center; justify-content: space-between; padding-left: 0; }
.slideWrap .imgSlide.original { animation: 30s linear 0s infinite normal forwards running slide01; }
.slideWrap .imgSlide.clone { animation: 30s linear 0s infinite normal none running slide02; }
.slideWrap .imgSlide li { width: 200px; height: 200px; line-height: 200px; margin-right: 5vw; background-color: #ccc; text-align: center; }

/** 애니메이션 **/
/* 원본용 */
@keyframes slide01 { 
    0% { transform: translateX(0); }
    50% { transform: translateX(-100%); }
    50.01% { transform: translateX(100%); }
    100% { transform: translateX(0); }
}

/* 복제용 */
@keyframes slide02 { 
    0% { transform: translateX(0); }
    100% { transform: translateX(-200%); }
}

 

📌 JavaScript

const imgSlide = document.querySelector(".imgSlide");

// 복제
const clone = imgSlide.cloneNode(true);

// 복제본 추가
document.querySelector(".slideWrap").appendChild(clone);

// 원본, 복제본 위치 지정
document.querySelector(".imgSlide").offsetWidth + "px";

// 클래스 할당
imgSlide.classList.add("original");
clone.classList.add("clone");

 

💛 결과물

Html 아이콘 제작자: Freepik - Flaticon
Css 아이콘 제작자: Freepik - Flaticon
자바 스크립트 아이콘 제작자: Rmpp - Flaticon

11,072종의 무료 html 아이콘