JSFiddle - React, Tailwind, and code Playground

HTML

<div class='container'>
  <div class="items">
    <div class="item item1"></div>
    <div class="item item2"></div>
    <div class="item item3"></div>
    <div class="item item4"></div>
    <div class="item item5"></div>
    <div class="item item6"></div>
    <div class="item item7"></div>
  </div>
</div>

CSS

.container {
    height: 50px;
    width: 300px;
    border: 1px solid black;
    overflow: hidden;
    position: relative;
}
.items { width: 20000px; height: 50px; position: absolute; top: 0; left: 0; }
.item { width: 2000px; height: 50px; float: left; }

.item1 { background: red; }
.item2 { background: orange; }
.item3 { background: yellow; }
.item4 { background: green; }
.item5 { background: blue; }
.item6 { background: salmon; }
.item7 { background: pink; }

JavaScript

var counter = 0;
var intId = setInterval(function(){
    counter -= 2000;
    $(".items").animate({ left: counter });
    
    if (counter < -10000) {
       clearInterval(intId);
    }
}, 1000);