title: Images do not fit inside slider
body: <p>I've created an image slider using HTML and JS.
  One problem I've come across that I cant quite work myself around is how the image slider transmits multiple images for each slide when the dimensions of the image does not perfectly fit the box. I would like to change this code so that there is only one image displayed at a single time + the image is centered to the box.
  Does anyone have any suggestions on to how I would edit this?
  Please let me know if any additional information is needed.</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>const carouselSlide = document.querySelector('.carousel-slide');
  const carouselImages = document.querySelectorAll('.carousel-slide img');
  
  const prevBtn = document.querySelector('#prevBtn');
  const nextBtn = document.querySelector('#nextBtn');
  
  let counter = 1;
  const size = carouselImages[0].clientWidth;
  
  carouselSlide.style.transform = 'translateX(' + (-size * counter) + 'px)';
  
  //Button Listeners
  
  nextBtn.addEventListener('click', () =&gt; {
    if (counter &gt;= carouselImages.length - 1) {
      return;
    }
    carouselSlide.style.tranisition = "transform 0.4s ease-in-out"
    counter++;
    carouselSlide.style.transform = 'translateX(' + (-size * counter) + 'px)';
  });
  
  
  prevBtn.addEventListener('click', () =&gt; {
    if (counter &lt;= 0) {
      return;
    }
    carouselSlide.style.tranisition = "transform 0.4s ease-in-out"
    counter--;
    carouselSlide.style.transform = 'translateX(' + (-size * counter) + 'px)';
  });
  
  carouselSlide.addEventListener('transitonend', () =&gt; {
  
    if (carouselImages[counter].id === 'lastclone') {
      carouselSlide.style.transition = "none";
      counter = carouselImage.length - 2;
      carouselSlide.style.transform = 'translateX(' + (-size * counter) + 'px)';
    }
    if (carouselImages[counter].id === 'firstclone') {
      carouselSlide.style.transition = "none";
      counter = carouselImage.length - counter;
      carouselSlide.style.transform = 'translateX(' + (-size * counter) + 'px)';
    }
  });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="carousel-container"&gt;
    &lt;i class="fa fa-arrow-left" id="prevBtn" aria-hidden="true"&gt;&lt;/i&gt;
    &lt;i class="fa fa-arrow-right" id="nextBtn" aria-hidden="true"&gt;&lt;/i&gt;
    &lt;div class="carousel-slide"&gt;
      &lt;img src="public/images/homme.jpeg" id="lastClone" alt=""&gt;
      &lt;img src="public/images/homme.jpeg" alt=""&gt;
      &lt;img src="public/images/homme.jpeg" alt=""&gt;
      &lt;img src="public/images/homme.jpeg" alt=""&gt;
      &lt;img src="public/images/homme.jpeg" id="firstClone" alt=""&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>