Как исправить отображение содержимого в слайдере с счетчиком?

document.addEventListener('DOMContentLoaded', function() {
  const slider = document.querySelector('.slider');
  const counter = document.getElementById('slider-counter');
  let currentSlide = 1;
  const totalSlides = document.querySelectorAll('.slide').length;

  function updateCounter() {
    counter.textContent = `${currentSlide} / ${totalSlides}`;
  }

  function showSlide(index) {
    slider.style.transform = `translateX(-${(index - 1) * 100}%)`;
    currentSlide = index;
    updateCounter();
  }

  // Handle next button click
  document.getElementById('next-btn').addEventListener('click', function() {
    if (currentSlide < totalSlides) {
      showSlide(currentSlide + 1);
    }
  });

  // Handle previous button click
  document.getElementById('prev-btn').addEventListener('click', function() {
    if (currentSlide > 1) {
      showSlide(currentSlide - 1);
    }
  });
});

.slider-container {
  position: relative;
  width: 980px;
  height: 280px;
  margin: auto;
  background: #fff;
  box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.5);
  z-index: 1;
}

.slider {
  width: 100%;
  display: flex;
}

.testimonial-content {
  padding-top: 20px;
  padding-left: 40px;
}

.slide {
  min-width: 100%;
  box-sizing: border-box;
}

#slider-counter {
  position: absolute;
  bottom: 10px;
  top: 32%;
  left: 80%;
  transform: translateX(-50%);
}

.slider-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-size: 24px;
  cursor: pointer;
}

#prev-btn {
  left: 690px;
  top: 100px;
}

#next-btn {
  right: 100px;
  top: 100px;
}

<meta name="viewport" content="width=device-width, initial-scale=1.0">
<div class="slider-container">
  <div class="slider">
    <div class="slide">
      <div class="testimonial-content">

        <h3 class="title">Ira</h3>
        <span class="post">Graphic Designer</span>
        <p class="description">
          Another great testimonial goes here. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
        </p>
      </div>

    </div>
    <div class="slide">
      <div class="testimonial-content">
        <h3 class="title">Ira</h3>
        <span class="post">Graphic Designer</span>
        <p class="description">
          Another great testimonial goes here. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
        </p>
      </div>
    </div>
    <div class="slide">
      <div class="testimonial-content">
        <h3 class="title">Ira</h3>
        <span class="post">Graphic Designer</span>
        <p class="description">
          Another great testimonial goes here. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
        </p>
      </div>
    </div>
    <div class="slide">
      <div class="testimonial-content">
        <h3 class="title">Ira</h3>
        <span class="post">Graphic Designer</span>
        <p class="description">
          Another great testimonial goes here. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
        </p>
      </div>
    </div>
    <div class="slide">
      <div class="testimonial-content">
        <h3 class="title">Ira</h3>
        <span class="post">Graphic Designer</span>
        <p class="description">
          Another great testimonial goes here. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
        </p>
      </div>
    </div>
    <div class="slide">
      <div class="testimonial-content">
        <h3 class="title">Ira</h3>
        <span class="post">Graphic Designer</span>
        <p class="description">
          Another great testimonial goes here. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
        </p>
      </div>
    </div>
    <div class="slide">
      <div class="testimonial-content">
        <h3 class="title">Ira</h3>
        <span class="post">Graphic Designer</span>
        <p class="description">
          Another great testimonial goes here. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
        </p>
      </div>
    </div>
    <div class="slide">
      <div class="testimonial-content">
        <h3 class="title">Ira</h3>
        <span class="post">Graphic Designer</span>
        <p class="description">
          Another great testimonial goes here. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
        </p>
      </div>
    </div>
  </div>
  <div id="slider-counter">1 / 8</div>
  <div id="prev-btn" class="slider-btn">&lt;</div>
  <div id="next-btn" class="slider-btn">&gt;</div>
</div>