JSFiddle - React, Tailwind, and code Playground
HTML
<div id="marquee-container"
><span><img src="http://www.dragonfly-site.com/graphics/20-free-dragonfly-clip-art-l.jpg" /></span
><span><img src="http://0.tqn.com/d/macs/1/0/2/M/-/-/clipprojectchristmas_400x400.png" /></span
></div>
CSS
#marquee-container {
width: 500px; /* or whatever you want */
margin: 0 auto; /* centers it */
overflow: hidden;
white-space: nowrap;
}
JavaScript
(function(window, document, undefined) {
var spaceinterval = 1;
var timeinterval = 10; // `speed`
var max;
var firstrun = true;
// Interval function:
var gallery = function() {
var elem = document.getElementById("marquee-container");
if (elem) {
if (firstrun) {
max = elem.scrollWidth;
// Clone the children of the container until the
// scrollWidth is at least twice as large as max.
while (elem.scrollWidth < max * 2) {
var length = elem.children.length;
for (var i = 0; i < length; ++i) {
elem.appendChild(elem.children[i].cloneNode(true));
}
break;
}
firstrun = false;
}
if (elem.scrollLeft >= max) {
elem.scrollLeft -= max;
} else {
elem.scrollLeft += spaceinterval;
}
}
};
window.setInterval(gallery, timeinterval);
})(window, document);