워드프레스 끊김없는 롤링배너 만들기 (Elementor 이용)

워드프레스에서 배너끊김현상없는 무한으로 돌아가는 배너 만드는 방법!

HTML 코드

<div class="outer">
    <!-- This div is important! It lets us specify margin-left later on. -->
    <div>
        <div class="loop"><div class="content"> 배너 내용 </div></div>
    </div>
</div>

<script>
document.querySelectorAll('.outer').forEach(el => {
	let content = el.querySelector('.content');

	repeatContent(content, el.offsetWidth);

	let slider = el.querySelector('.loop');
	slider.innerHTML = slider.innerHTML + slider.innerHTML;
});

function repeatContent(el, till) {
    let html = el.innerHTML;
    let counter = 0; // prevents infinite loop
    
    while (el.offsetWidth < till && counter < 100) {
        el.innerHTML += html;
        counter += 1;
    }
}
</script>

위의 코드를 Elementor의 HTML코드 기능을 이용하여 넣어준다. “배너 내용”은 커스텀으로 넣어주면 된다.

CSS 코드

.outer {
    overflow: hidden;  !important;
}

.outer div {
    display: inline-block;
}

.loop {
    white-space: nowrap;
    animation: loop-anim 30s linear infinite;
}

@keyframes loop-anim {
    0% {
        margin-left: 0;
    }
    100% {
        margin-left: -50% /* This works because of the div between "outer" and "loop" */
    }
}

위의 CSS코드까지 추가해주면, 끊김없이 돌아가는 배너가 완성된다!