JSFiddle - React, Tailwind, and code Playground

by lollero

HTML

<div id="imageScroll">
    <div>
        <img src="http://placekitten.com/g/200/300" alt="" />
        <img src="http://lorempixel.com/200/300/sports" alt="" />
        <img src="http://lorempixel.com/200/300/nature" alt="" />
        <img src="http://lorempixel.com/200/300/" alt="" />
        <img src="http://placekitten.com/g/200/300" alt="" />
        <img src="http://lorempixel.com/g/200/300/sports" alt="" />
        <img src="http://lorempixel.com/g/200/300/nature" alt="" />
        <img src="http://lorempixel.com/g/200/300/" alt="" />
    </div>
</div>

CSS

#imageScroll {
    height: 300px;
    width: 100%;
    max-width: 700px;
    float: left;
    overflow: hidden;
}
#imageScroll img {
    float: left;
}

#imageScroll > div {
    width: 1000%;
    -webkit-animation: myanim 5s linear infinite;
    animation: myanim 5s linear infinite;
}

@-webkit-keyframes myanim {
    0%   { margin-left: 0px; }
    100% { margin-left: -200px; }
}
@keyframes myanim {
    0%   { opacity: 0.0; }
    50%  { opacity: 0.5; }
    100% { opacity: 1.0; }
}

JavaScript

var imageScroll = document.getElementById('imageScroll').children[0];
setInterval( function() {
    imageScroll.appendChild( imageScroll.children[0] );
}, 5000);