title: How to add smooth transition between first and last slide of a carousel?
body: <p>It is a bit hard to explain so I made <a href="https://codepen.io/basirpayenda/pen/mdJqBaR?editors=0110" rel="nofollow noreferrer">this codepen</a> for any reference. 
  I am trying to clone Bootstrap carousel using vanilla JavaScript, I added transition between slides which works nice for all slides exists between first and last slide, but as I click previous button to go from first slide to last slide or clicking next button to go from last slide to first slide this transition behaves weird it travels along all other slides in between. </p>
  
  <p>This is the html I use: </p>
  
  <pre><code>   &lt;div class="carousel-container"&gt;
      &lt;div class="carousel-slide"&gt;
        &lt;img src="imgs/pc1(1).jpg" class="firstSlide" alt=""&gt;
        &lt;img src="imgs/pc1(2).jpg" alt=""&gt;
        &lt;img src="imgs/pc1(3).jpg" class="lastSlide" alt=""&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;button id="prevBtn"&gt;Prev&lt;/button&gt;
    &lt;button id="nextBtn"&gt;Next&lt;/button&gt;
  </code></pre>
  
  <p>and the JavaScript: </p>
  
  <pre><code>const carousel_slide = document.querySelector(".carousel-slide");
  const carousel_images = document.querySelectorAll(".carousel-slide img");
  const prev_btn = document.querySelector("#prevBtn");
  const next_btn = document.querySelector("#nextBtn");
  
  let counter = 0;
  let size = carousel_images[0].clientWidth;
  
  next_btn.addEventListener("click", () =&gt; {
    carousel_slide.style.transition = "all 0.3s ease-in-out";
    counter++;
    if (counter &gt;= carousel_images.length) {
      counter = -1;
      counter++;
    }
    carousel_slide.style.transform = `translateX(${-size * counter}px)`;
  });
  
  prev_btn.addEventListener("click", () =&gt; {
    carousel_slide.style.transition = "all 0.3s ease-in-out";
    counter--;
    if (counter &lt; 0) {
      counter = carousel_images.length - 2;
      counter++;
    }
    carousel_slide.style.transform = `translateX(${-size * counter}px)`;
  });
  </code></pre>
  
  <p>Please help me solve this transition problem between these ending slides of this carousel? Thank you</p>