TIL - JS를 이용해서 무한 슬라이드(loop slide) 만들기

토요일 아침 유튜브를 보다가 업다운 무한 슬라이드가 구현된 영상을 보고 개인 과제에 슬라이드 기능을 추가하면 좋겠다고 생각해서 일단 스스로 슬라이드를 한번 만들어 보기로 했습니다.

 

 

와이어 프레임

 

자동으로 재생되는 슬라이드

---

CSS로 해결하기 (오답)

@keyframes moveSlides {
    0% {
        transform: translateX(0%);
    }
    100% {
        transform: translateX(-100%);
    }
}

// animation: moveSlides 3s linear infinite;

 

처음에 시도했던 방법은 슬라이드 A는 오른쪽에서 왼쪽으로 이동하는 것이라서 첫 요소가 슬라이드 되고 뒤에 항목으로 이동했던 방식과 슬라이드 B는 왼쪽에서 오른쪽으로 이동하는 것이라서 왼쪽에 화면 밖에 첫 요소를 숨기고 두 번째 요소가 화면 맨 왼쪽에 위치시킨 다음 오른쪽으로 이동하면서 끝 요소를 insertBefore를 이용해서 첫 요소로 이동시키는 무한 굴레를 만들기까지는 성공했는데 저는 그동안 translateX와 setInterval를 이용해가지고 화면의 부자연스러움이 있었습니다. 

 

다음에는 css로 슬라이드를 만들려고 했습니다. css keyframse와 animation속성을 이용하면 자연스럽게 움직임이 가능했습니다. 하지만 문제점이 지정한 시간이 지나면 초기화가 되어서 부자연스럽다는 점이었습니다.

 transform: translateX(calc(100% * 3));로 속도를 조절하고 슬라이드의 복사본을 만들어서 기존의 슬라이드에 이어 붙이고 다양한 시도를 해봐도 animate: moveSlides infinite linear infinite;는 불가능했습니다. 결국 animate: moveSlides 시간 linear infinite;에 시간을 한정해야 작동이 되어서 css로 해결하는 방안은 실패했습니다.

 

와이어 프레임에 나온 슬라이드처럼 위에 있는 슬라이드 A와 아래에 있는 슬라이드 B의 구현을 일단 하기로 한 것을 미루고 버튼을 눌러 슬라이드를 이동하는 것과 자동 재생을 하는 슬라이드의 작동 방식을 공부하면서 캐러셀도 바닐라 JS로 만들어서 적용해봤지만  결국 만족스럽지 않아서 결국 슬라이드의 영감을 받은 유튜브를 보니 무한 슬라이드의 작동 방식을 재귀 함수로 만들어서 구현을 하면 간단하게 해결되는 문제였습니다

 

재귀함수를 이용해서 슬라이드 만들기

---

// 슬라이드 이동 함수
function moveSlide(targetEl, direction) {
    const target = document.querySelector(targetEl)
    const firstLi = document.querySelector('li');
    const slideWidth = firstLi.offsetWidth + 16;
    const animation = target.animate([

        { right: direction === "right" ? `${slideWidth}px` : `-${slideWidth}px` }
    ], {
        duration: 4000,
        easing: 'linear'
    });

    animation.onfinish = () => {
        if(direction === "right") {
            target.appendChild(firstLi);
        } else {
            const lastLi = target.querySelector('li:last-child');
            target.insertBefore(lastLi, target.firstChild);
        }
        target.style.right = '0px';
        moveSlide(targetEl, direction);
    }
};

.

/* 슬라이드 영화 이미지 */
.slider-container {
    width: 100%;    
    height: 600px;
    position: relative;
    overflow: hidden;
}
.slider-container ul{
    display: flex;   
    position: absolute;           
    width: 100%;
    gap: 16px;
    padding: 16px;    
    transition:transform 0.5s;
}
.right {
    top: 0;    
}
.left {
    top: 300px;  
    transform: translateX(-516px); /* 슬라이드 아이템의 width + gap*/ 
}

<div class="slider-container">
            <!-- 1위 ~ 10위 슬라이더 -->
            <ul class="right">
                <!-- 슬라이드 항목 -->
                <!-- <div class="slide-item"><img src="https://image.tmdb.org/t/p/w500/kXfqcdQKsToO0OUXHcrrNCHDBzO.jpg" alt="The Shawshank Redemption"></div> -->
            </ul>
            <!-- 11위 ~ 20위 슬라이더 -->
            <ul class="left">
                <!-- 슬라이드 항목 -->
            </ul>
        </div>

용량 때문에 편집해서 끊겨보이지만 편집 전 움직임은 훨씬 부드럽고 자연스러워요