Как изменить слайдер под 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>