JSFiddle - React, Tailwind, and code Playground

by al nmeri

HTML

<ul>
    <li>
        <img src=img-1.jpg class=images alt="">
    </li>
    <li>
        <img src=img-4.jpg class=images alt="">
    </li>
    <li>
        <img src=img-3.jpg class=images alt="">
    </li>
    <li>
        <img src=img-2.jpg class=images alt="">
    </li>
</ul>

CSS

ul {
    display: inline-block;
    border: 2px solid #444;
    height: 600px;
    width: 100%;
    overflow: hidden;
}
li {
    list-style: none;
    width: 100%;
    height: inherit;
}
li img {
    position: absolute;
    top: 5%;
    left: 0;
    width: 100%;
    height: inherit;
}

JavaScript

var imgs = document.querySelectorAll('.images');
    var list = document.getElementsByTagName('LI');
    setInterval(function () {
        for (var i = 0; i <= imgs.length; i++) {
            // list.appendChild(imgs[i]);
            imgs[i].style.left = '-4000px';
        }
    }, 3500);