Как изменить слайдер под 3 картинки вместо одной

Есть такой слайдер. Как можно его изменить так, чтобы он нормально отображал не одну, а сразу 3 картинки с такой же прокруткой?

let slides = document.querySelectorAll('.slide-single');
//console.log(slides);
let slider = [];

for(let i=0; i<slides.length; i++) {
    slider[i] = slides[i].src;
  slides[i].remove();
}
//console.log(slider);

let step = 0;
let offset = 0;
function draw() {
    let img = document.createElement('img');
  img.src = slider[step];
  img.classList.add('slide-single');
  img.style.left = offset*100+'px';
  document.querySelector('#slide').appendChild(img);
  if(step+1 == slider.length) {
    step=0;
  }
  else {
    step++;
  }
    offset = 1;
}

function left() {
    document.onclick=null;
    let slides2 = document.querySelectorAll('.slide-single');
  let offset2 = 0;
  for(let i=0; i<slides2.length; i++) {
        slides2[i].style.left = offset2*100-100+'px';
    offset2++;
    }
  setTimeout(function(){
    slides2[0].remove();
    draw();
    document.onclick=left;
  }, 1000);
}

draw();draw();

document.onclick=left;
#slide {
  width: 100px;
  height: 100px;
  border: 3px solid #c0c0c0;
  margin: 0 auto;
  position: relative;
  font-family: sans-serif;
  overflow: hidden;
}

.slide-single {
  width: 100px;
  height: 100px;
  position: absolute;
  transition: all ease 1s;
  left: 0;
  top: 0;
}
<div id="slide">
  <img src="https://s1.stc.all.kpcdn.net/putevoditel/projectid_103889/images/tild3266-6236-4266-b833-393539393436__cat-3601092_1280.jpg" alt="" class="slide-single">
  <img src="https://vesti.ua/wp-content/uploads/2020/05/1efba0ca7e9634e8b05b0ab889aaaf3cf58c669ebd46a70f2dce4fe19a445a31-800x530.jpg" alt="" class="slide-single">
  <img src="https://img.webmd.com/dtmcms/live/webmd/consumer_assets/site_images/article_thumbnails/other/cat_relaxing_on_patio_other/1800x1200_cat_relaxing_on_patio_other.jpg" alt="" class="slide-single">
  <img src="https://ru.sm.news/wp-content/uploads/2020/04/22/1800x1200_cat_weight_other.jpg" alt="" class="slide-single">
    <img src="https://cdn.mos.cms.futurecdn.net/VSy6kJDNq2pSXsCzb6cvYF.jpg" alt="" class="slide-single">
</div>


Ответы (0 шт):