JSFiddle - React, Tailwind, and code Playground

by l_mke

HTML

<h1 style="text-align: center;font-size: 40px; margin: 20px 0;">Слайдер</h1>
 

    <div id="slider">

        <img src="https://picsum.photos/id/1002/4312/2868" alt="" class="slide_item">
        <img src="https://picsum.photos/id/100/2500/1656" alt="" class="slide_item">
        <img src="https://picsum.photos/id/1000/5626/3635" alt="" class="slide_item">
    </div>

CSS

#slider{
    width: 1170px;
    height: 400px;
    margin: 0px auto;
    position: relative;
    border: 3px solid #c0c0c0;
    overflow: hidden;
}
.slide_item{
    width: 1170px;
    height: 400px;
    position: absolute;
    left: 0;
    top:0;
    transition: all ease-in-out 2s;
    float: left;
}

JavaScript

let slides = document.querySelectorAll('.slide_item');
let slider = [];
console.log('slider: ', slider);
for(i = 0; i<slides.length; i++){
    slider[i] = slides[i].src;
    slides[i].remove();
}
let step = 0;
let offset = 0;
function draw(){
    let img = document.createElement('img');
    img.src = slider[step];
    img.classList.add('slide_item');
    img.style.left = offset*1170 + 'px';
    document.querySelector('#slider').appendChild(img);
    if(step + 1 == slider.length){
        step = 0;
    }else{
        step++
    }
    offset = 1;
}
function left() {
    let slides2 = document.querySelectorAll('.slide_item');
    let offset2 = 0;
    for (let i = 0; i < slides2.length; i++) {
        slides2[i].style.left = offset2*1170 - 1170 + 'px';
        offset2++;
    }
    setTimeout(function () {
        slides2[0].remove();
        draw();
    },2000);
}
draw();draw();
setInterval(left,5000)