Адаптивный слайдер Vanilla для сайта

<div class="nukelances_nogunaselym">
  <ul class="ludegoukaicles" id="ludegoukaicles">
  <li><img src="Здесь ссылка на изображение #1.jpg" class="img celopasked" id="1"></li>
  <li><img src="Здесь ссылка на изображение #2.jpg" class="img" id="2"></li>
  <li><img src="Здесь ссылка на изображение #3.jpg" class="img" id="3"></li>
  <button class="kaimendoncleg" id="left">Предыдущая</button>
  <button class="kaimendoncleg" id="right">Следующий</button>
  <button class="kaimendoncleg" id="play">Play</button>
  <button class="kaimendoncleg" id="stop">Stop</button>
  <div style="clear: both"></div>
  </ul>  
  </div>

.kaimendoncleg {
  border: 1px solid #9a9898;
  border-radius: 35px;
  color: #ececec;
  outline: none;
  background: rgba(48, 48, 49, 0.57);
  transition-duration: 0.40s;
  padding: 9px;
  cursor: pointer;
  position: absolute;
  top: 50%;
  z-index: 999;
}
.kaimendoncleg:hover {
  background: rgba(18, 18, 19, 0.76);
  border: 1px solid #787878;
}
.kaimendoncleg#left {
  left: 0;
}
.kaimendoncleg#right {
  right: 0;
}
.kaimendoncleg#play, .kaimendoncleg#stop {
  top: 0;
  left: 0;
  width: 5%;
  background: rgba(160, 160, 165, 0.44);
  font-size: 13px;
  border: 2px solid rgba(168, 170, 175, 0.8);
}
.kaimendoncleg#stop {
  display: none;
}
.nukelances_nogunaselym {
  position: relative;
}
.ludegoukaicles {
  max-height: 100vh;
  margin: 0;
  padding: 0;  
  overflow-y: hidden;
}
.ludegoukaicles > li {
  float: left;
  list-style: none;
  width: 100%;
}

.ludegoukaicles > li > img {
  display: none;
  transition-duration: 0.35s;
  height: 100vh;
  width: 100vw;
}
.ludegoukaicles > li > img.celopasked {
  display: block;
}

var ludegoukaicles = document.getElementById("ludegoukaicles");
  var ludegoukaiclesChildren = ludegoukaicles.children;
  var btnLeft = document.getElementById("left");
  var btnRight = document.getElementById("right");
  var btnPlay = document.getElementById("play");
  var btnStop = document.getElementById("stop");
  var numberOfImg = document.getElementsByClassName("img").length;
  var interval;

  btnLeft.onclick = prev;
  btnRight.onclick = next;
  btnPlay.onclick = function() {
  btnPlay.style.display = "none";
  btnStop.style.display = "block";
  interval = setInterval(function() {  
  next();  
  }, 3000);
  };
  btnStop.onclick = function() {
  btnPlay.style.display = "block";
  btnStop.style.display = "none";
  clearInterval(interval);
  };

  function next() {
  var current = document.getElementsByClassName("celopasked")[0];
  var id = current.id;
  current.classList.remove("celopasked");
  (id >= numberOfImg) ? id=1: id++;
  document.getElementById(id).classList.add("celopasked");
  }

  function prev() {
  var current = document.getElementsByClassName("celopasked")[0];
  var id = current.id;
  current.classList.remove("celopasked");
  (id-1 < 1) ? id = numberOfImg+1: id=id;
  document.getElementById(id-1).classList.add("celopasked");
  }