I am creating an infinite sliding carousel. when I add the below, after the animation there is a little glitch with the carousel jumping and returning to the start.
If I remove the Javascript and manual add another “box-container prim” the carousel works perfectly. I dont want to editing 2 divs, so I want to clone the div. Why is the behavior different when you clone the div? when you inspect the code the divs are exactly the same?
*{
padding:0;
margin:0;
}
.wrapper{
width:100vw;
height:100px;
display:flex;
overflow:hidden;
}
.box-container {
display:flex;
width:100%;
height:100%;
}
.box{
width:200px;
border:1px solid black;
}
.prim {
animation:scroll 10s linear infinite;
}
<div class="wrapper">
<div class="box-container prim">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
<div class="box">4</div>
<div class="box">5</div>
</div>
</div>
<script>
let x = document.querySelector('.box-container')
let clone=x.cloneNode(true);
x.after(clone)
</script>
Adding manual html, and cloning with js