An infinite carousel with vanilla JavaScript
<p>I am trying to build my own <em>carousel</em> with pure JavaScript. </p>

<p>I'm struggling with picking up the most <strong>efficient</strong> way to add an <code>infinite carousel</code> option.</p>

<p>For some reasons, every element (photo, generic object) must have an <code>id</code></p>

<p>The algorithm I see goes like that:</p>

<ul>
<li>You check if the carousel is overflown (the are enough objects to fit
the whole container) </li>
<li>If not: append to the back a copy of the first element, then
a copy of the second element and so on. (But there will be an issue with the ids, because this object will have the same id)</li>
</ul>

<p><a href="https://i.stack.imgur.com/nO00e.png" rel="noreferrer"><img src="https://i.stack.imgur.com/nO00e.png" alt="Adding copies"></a>
 - If the user is scrolling to the last object (to right) then append
   the first DOM object to the array back<br>
 - If the user is scrolling to
   the first object (to left) then add the last DOM child to array
   front.</p>

<p><strong>Is this going to work? Is there any other efficient way of doing an infinite carousel?</strong></p>

<p>I have also heard that it's better to use translate property rather than changing the left, right properties, so it there would be more work for the GPU than for CPU.</p>