JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
    <ul>
        <li>1 Lorem ipsum dolor sit amet</li>
        <li>2 Consectetur adipiscing elit</li>
        <li>3 Praesent commodo nisi eu sapien</li>
        <li>4 Fusce tempor, sapien vitae tempus dapibus</li>
        <li>5 Aenean pulvinar urna vel tortor</li>
        <li>6 Proin turpis tellus, fringilla eget molestie nec</li>
        <li>7 Etiam sed varius lacus</li>
        <li>8 Aenean facilisis tincidunt massa luctus feugiat</li>
        <li>9 Etiam suscipit vel erat sit amet fringilla</li>
        <li>10 Nulla sit amet eros mauris.</li>
    </ul>
</div>

CSS

ul {
    overflow: hidden;
    white-space: nowrap;
    padding:30px 0;
    margin:0;
}
li {
    display:inline;
    border:1px solid #ccc;
    padding:10px;
    margin:10px;
    list-style-type:none;
}

JavaScript

var liNum = 1;
var timerID;
var maxLi = 0;

$(function () {
    timerID = setInterval(scrollLi, 2500);
    maxLi = $(".container ul li").length;
});

function scrollLi() {
    if (liNum >= maxLi) { //reset
        $(".container ul").animate({scrollLeft: 0}, 1000);
        liNum = 1;
        //clearInterval(timerID);

    } else { //scroll next two li width
        var x = $(".container ul li:nth-child(" + liNum + ")").outerWidth(true);
        liNum++;
        x += $(".container ul li:nth-child(" + liNum + ")").outerWidth(true);
        liNum++;
        $(".container ul").animate({scrollLeft: $(".container ul").scrollLeft() + x}, 1500);
    }
}