title: Image carousel translate calculations
body: <p>I'm attempting to create an image carousel, but I'm having trouble with calculating the right translate values.</p>
  
  <p>Basically what I'm going for is, if the current image is not the first or the last, it should look exactly like the the second slide ( centered and with parts of the previous and next slide ). If the current slide is the first image, it should show a part of next slide on the right ( this works ). Finally, if the current slide is the last, it should show a part of the previous slide, exactly like the first slide, but on the left side.</p>
  
  <p>There's something I'm missing with the translate values, but I can't figure out what. Or is there maybe a better way of achieving this ?</p>
  
  <pre><code>const slides = document.querySelectorAll('.slide');
  const slider = document.querySelector('.slides');
  const transitionBy = 85;
  var currSlide = 0;
  
  setInterval(function() {     
   if (currSlide &gt; slides.length - 1) {
      currSlide = 0;
    } else {
      slider.style.transform = `translate(-${transitionBy * currSlide}%)`;
    currSlide++;
    }
  }, 1500);
  </code></pre>
  
  <p>Code can be found here:</p>
  
  <p><a href="https://jsfiddle.net/0e98d2mz/3/" rel="nofollow noreferrer">https://jsfiddle.net/0e98d2mz/3/</a></p>