While experimenting with creating a basic text carousel, I encountered a puzzling issue that has me stumped.
The structure of the carousel is straightforward. It consists of a wrapper and the actual text to be cycled through.
Unfortunately, the problem appears to stem from the setInterval method. When the animation completes its cycle and loops back to the beginning, there is an odd overlap between the first and second texts displayed. The initial text animates as expected but then briefly reappears to replace the second text.
If anyone could shed light on why this error is occurring in such a way, I would greatly appreciate it.
let animateSlide = setInterval(moveSlide, 1200);
function moveSlide() {
let carousel = document.getElementById("wordCarousel");
let firstSlide = carousel.children[0];
let createID = document.createAttribute("id");
createID.value = "active";
firstSlide.setAttributeNode(createID);
carousel.appendChild(carousel.firstChild);
carousel.children[carousel.children.length - 1].removeAttribute("id");
}/* Carousel Styles */
#wordCarousel {
height: 36px;
overflow: hidden;
}
.carouselSlide {
color: #555;
font-size: 36px;
}
#active {
margin-top: 0px;
animation-name: example;
animation-duration: 1.2s;
animation-timing-function: ease;
}
@keyframes example {
from {
margin-top: 0px;
}
to {
margin-top: -40px;
}
}<div id="wordCarousel">
<div class="carouselSlide">
Item 1
</div>
<div class="carouselSlide">
Item 2
</div>
<div class="carouselSlide">
Item 3
</div>
<div class="carouselSlide">
Item 4
</div>
</div>