Touchscreen Auto Image Slider is showing white space

const slides = document.getElementById("slides");
const allSlides = document.querySelectorAll(".slide");
const slidesLength = allSlides.length;
const slideWidth = allSlides[0].offsetWidth;

let index = 0;
let posX1;
let posX2;
let initialPosition;
let finalPosition;
var myTimer;

let canISlide = true;

const prev = document.getElementById("prev");
const next = document.getElementById("next");

const firstSlide = allSlides[0];
const lastSlide = allSlides[allSlides.length - 1];

const cloneFirstSlide = firstSlide.cloneNode(true);
const cloneLastSlide = lastSlide.cloneNode(true);

slides.appendChild(cloneFirstSlide);
slides.insertBefore(cloneLastSlide, firstSlide);

next.addEventListener("click", () => switchSlide("next"));
prev.addEventListener("click", () => switchSlide("prev"));

slides.addEventListener("transitionend", checkIndex);

slides.addEventListener("mouseown", dragStart);

slides.addEventListener("touchstart", dragStart);
slides.addEventListener("touchmove", dragMove);
slides.addEventListener("touchend", dragEnd);

function dragStart(e) {
  e.preventDefault();
  initialPosition = slides.offsetLeft;

  if (e.type == "touchstart") {
    posX1 = e.touches[0].clientX;
  } else {
    posX1 = e.clientX;

    document.onmouseup = dragEnd;
    document.onmousemove = dragMove;
  }
}

function dragMove(e) {
  if (e.type == "touchmove") {
    posX2 = posX1 - e.touches[0].clientX;
    posX1 = e.touches[0].clientX;
  } else {
    posX2 = posX1 - e.clientX;
    posX1 = e.clientX;
  }

  slides.style.left = `${slides.offsetLeft - posX2}px`;
}

function dragEnd() {
  /* 
    three possibilities:
    1. next slide
    2. prev slide
    3. stay still
    */
  finalPosition = slides.offsetLeft;
  if (finalPosition - initialPosition < -496) {
    switchSlide("next", "dragging");
  } else if (finalPosition - initialPosition > 496) {
    switchSlide("prev", "dragging");
  } else {
    slides.style.left = `${initialPosition}px`;
  }

  document.onmouseup = null;
  document.onmousemove = null;
}

function switchSlide(arg, arg2) {
  slides.classList.add("transition");

  if (canISlide) {
    if (!arg2) {
      initialPosition = slides.offsetLeft;
    }
    if (arg == "next") {
      slides.style.left = `${initialPosition - slideWidth}px`;
      index++;
    } else {
      slides.style.left = `${initialPosition + slideWidth}px`;
      index--;
    }
  }

  canISlide = false;
}

function checkIndex() {
  slides.classList.remove("transition");

  if (index == -1) {
    slides.style.left = `-${slidesLength * slideWidth}px`;
    index = slidesLength - 1;
  }

  if (index == slidesLength) {
    slides.style.left = `-${1 * slideWidth}px`;
    index = 0;
  }

  canISlide = true;
}

* {
box-sizing: border-box;
}

.container body {
margin: 0;
display: flex;
justify-content: center;
align-items: center;
max-height: 100vh;
}

img {
width: 100%;
height: 100%;
}

.slider {
overflow: hidden;
position: relative;
width: 1080px;
height: 500px;
margin: auto;
}

.slides {
width: 10000px;
display: flex;
position: absolute;
top: 0;
left: -1080px;
cursor: pointer;
}

.slides.transition {
transition: all 0.3s ease-in-out;
}

.slide {
width: 1080px;
height: 500px;
animation: slide 16s infinite;
}

.prev,
.next {
position: absolute;
top: 50%;
transform: translateY(-50%);
color: #f3f3f3;
font-size: 4rem;
}

.next {
right: 2rem;
}

.prev {
left: 2rem;
}

.next:hover, .prev:hover {
transition: 0.2s ease-in-out;
}

.active {
background-color: #ffffff;
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-ms-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
}

@keyframes slide{
0%{
    transform: translateX(0);
}
25%{
    transform: translateX(0);
}
30%{
    transform: translateX(-100%);
}
50%{
    transform: translateX(-100%);
}
55%{
    transform: translateX(-200%);
}
75%{
    transform: translateX(-200%);
}
80%{
    transform: translateX(-300%);
}
100%{
    transform: translateX(-300%);
}
}

<div class="container">
<div class="slider">

<div class="slides" id="slides">
    <span class="slide">
        <a href="#">
        <img loading="lazy" src="img.png" alt="" width="100%"></a>
    </span>

    <span class="slide">
        <a href="#">
       <img loading="lazy" src="img2.png"></a>
     </span>

     <span class="slide">
        <a href="#">
       <img loading="lazy" src="img3-png" width="100%"></a>
     </span>
</div>

<a href="#" id="prev" class="prev">❮
      <i class="fas fa-caret-left"></i>
 </a>
 <a href="#" id="next" class="next">❯
     <i class="fas fa-caret-right"></i>
  </a>
</div>