Issues with CSS and JavaScript for creating a carousel with multiple images

I am trying to create a carousel with multiple images using HTML, CSS, and JavaScript, but I am having trouble getting it to work properly. The first image displays correctly, but the second image only shows up partially or not at all. I have tried adjusting the CSS, but it doesn't seem to be solving the issue.

Here is my current code:

document.addEventListener('DOMContentLoaded', () => {
    const track = document.querySelector('.carousel_track');
    const slides = Array.from(track.children);
    const nextButton = document.querySelector('button.button-carousel.next');
    const prevButton = document.querySelector('button.button-carousel.prev');
    const trackWidth = track.getBoundingClientRect().width;
    const slideWidth = trackWidth / slides.length;

    // const setSlide = (slide, index) => {
    //   slide.style.left = slideWidth * index + 'px';
    // };
    const setSlide = (slide, index) => {
        const offset = (track.offsetWidth - slideWidth) / 2;
        slide.style.left = slideWidth * index + offset + 'px';
      };
    slides.forEach(setSlide);

    const moveToSlide = (track, currS, nextS) => {
      track.style.transform = `translateX(-${nextS.style.left})`;
      currS.classList.remove('current-slide');
      nextS.classList.add('current-slide');
    };

    prevButton.addEventListener('click', e => {
      const currS = track.querySelector('.current-slide');
      const prevS = currS.previousElementSibling || slides[slides.length - 1];
      moveToSlide(track, currS, prevS);
    });

    nextButton.addEventListener('click', e => {
      const currS = track.querySelector('.current-slide');
      let nextS = currS.nextElementSibling;
      if (!nextS) {
        nextS = slides[0];
      }
      moveToSlide(track, currS, nextS);
    });
  });

.carousel {
  position: relative;
  height: 600px;
  width: 90%;
  margin: 0 auto;
  overflow: hidden;
}

.carousel_track {
  display: flex;
  padding: 0;
  margin: 0;
  list-style: none;
  position: relative;
  height: 100%;
  width: 200%; /* Set the width of the carousel_track to be twice the width of one slide */
  transition: transform 0.3s ease-in-out;
}


.slide {
  position: relative; /* Change the position of the slide to relative */
  display: inline-block; /* Set the display of the slide to inline-block */
  flex: 0 0 auto;
  width: slideWidth;
}

.slide img {
  width: 100%;
  height: 300px;
}


button.button-carousel.prev {
  position: absolute;
  top: 50%;
  left: 0;
  z-index: 50;
  border-radius: 5px;
  border: none;
  padding: 30px;
  transform: translateY(-50%);
}

button.button-carousel.next {
  position: absolute;
  top: 50%;
  right: 0;
  z-index: 50;
  border-radius: 5px;
  border: none;
  padding: 30px;
  transform: translateY(-50%);
}

 <div class="carousel">
    <button class="button-carousel prev"><svg width="14.6" height="27" viewBox="0 0 16 27"
        xmlns="http://www.w3.org/2000/svg">
        <path d="M16 23.207L6.11 13.161 16 3.093 12.955 0 0 13.161l12.955 13.161z" fill="#000000"></path>
      </svg></button>
    <button class="button-carousel next"><svg width="14.6" height="27" viewBox="0 0 16 27"
        xmlns="http://www.w3.org/2000/svg">
        <path d="M16 23.207L6.11 13.161 16 3.093 12.955 0 0 13.161l12.955 13.161z" fill="#000000"></path>
      </svg></button>
    <ul class="carousel_track">
      <li class="slide current-slide"><img class="slideimg" src="img1.webp" alt="image"></li>
      <li class="slide"><img class="slideimg" src="img4.webp" alt="image"></li>
    </ul>
</div>

Can anyone help me troubleshoot this issue and get the carousel to display all the images properly?

I tried to create a simple carousel with 2 images but right now i am getting only one image to move. i want both the images to move when i click on the next and prev buttons.

Via Active questions tagged javascript - Stack Overflow https://ift.tt/0FHRokm