title: An infinite carousel with vanilla JavaScript
body: <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>