[Vue + JS] 무한 롤링 배너 기능 구현하는 방법

.md_wrap {
    overflow: hidden;
    display: flex;
    gap: -4px;
    
    ul {
        display: flex;

        li {
            width: 340px;
            height: 544px;
            margin: 0 8px;
            background-color: #fff;
            display: flex;
        }
    }
    // 롤링배너 애니메이션
    #roller1 {
        animation: rollingleft1 90s linear infinite;
    }
    #roller2 {
        animation: rollingleft2 90s linear infinite;
    }
}

@keyframes rollingleft1 {
    0% { transform: translateX(0)}
	50% { transform: translateX(-100%)}
	50.01% { transform: translateX(100%)}
	100% { transform: translateX(0)}
}

@keyframes rollingleft2 {
    0% {transform: translateX(0)}
    100% {transform: translateX(-200%)}
}

<!-- 4. 미디어섹션(컴포넌트)-->
<section class="main_media">
    <h3>Media</h3>
    <div class="md_wrap">
        <div class="md_list">
            <ul>
                <MedComp v-for="(v, i) in mData" :key="i" :matchmedia="v" :dpt1val="v.depth1" :dpt2val="v.depth2"/>
            </ul>
        </div>
    </div>
</section>

methods: {
        rollBan() {
            // 롤링 배너 복제본 생성 
            let roller = document.querySelector('.md_list');
            roller.id = 'roller1'; // 아이디 부여
            
            // 노드 복제 (기본값은 false, 자식 노드까지 원하면 true)
            let clone = roller.cloneNode(true);
            clone.id = 'roller2';
            document.querySelector('.md_wrap').appendChild(clone); // .md_wrap 하위 자식으로 넣기

            document.querySelector('#roller1').style.left = '0px';
            document.querySelector('#roller2').style.left = document.querySelector('.md_list > ul').offsetWidth + 'px';
        },
    }