JSFiddle - React, Tailwind, and code Playground

HTML

<div class="infiniteCarousel clearfix ">
    <div class="wrapper">
        <ul>
            <li>test 1</li>
            <li>test 2</li>
            <li>test 3</li>
            <li>test 4</li>
            <li>test 5</li>
            <li>test 6</li>
            <li>test 7</li>
            <li>test 8</li>
            <li>test 9</li>
            <li>test 10</li>
            <!-- <li>test 5</li>-->
        </ul>
    </div>
</div>
<a href="" class="back">prev</a>

<a href="" class="forward">next</a></body>

CSS

.infiniteCarousel {
    width: 900px;
    height: 300px;
    position: relative;
}
.infiniteCarousel .wrapper {
    width: 900px;
    /* .infiniteCarousel width - (.wrapper margin-left + .wrapper margin-right) */
    overflow: auto;
    min-height: 300px;
    position: absolute;
    top: 0;
}
.infiniteCarousel .wrapper ul {
    width: 9999px;
    list-style-image:none;
    list-style-position:outside;
    list-style-type:none;
    margin:0;
    padding:0;
    position: absolute;
    top: 0;
}
li {
    width: 230px;
    height: 300px;
    background: yellow;
    float: left;
    margin-left: 70px;
}
li:first-child {
    margin-left: 0px;
}
li.empty {
    background: red;
}
.clearfix {
    display: block;
    zoom: 1;
}
.clearfix:after {
    content:" ";
    display: block;
    font-size: 0;
    height: 0;
    clear: both;
    visibility: hidden;
}

JavaScript

(function ($) {
    $.fn.infiniteCarousel = function () {
        function repeat(str, num) {
            return new Array(num + 1).join(str);
        }

        return this.each(function () {
            var $wrapper = $('> div', this).css('overflow', 'hidden'),
                $slider = $wrapper.find('> ul'),
                $items = $slider.find('> li'),
                $single = $items.filter(':first'),

                singleWidth = $single.outerWidth(true) + 70,

                visible = Math.ceil($wrapper.innerWidth() / singleWidth),
                currentPage = 1,
                pages = Math.ceil($items.length / visible);

            if (($items.length % visible) !== 0) {
                for(var i = 0; i <= visible - ($items.length % visible); i++)
                {
                     var $clone = $items.filter(':nth-child('+ i +')').clone().addClass('empty');
                    $slider.append($clone);
                }
               
                $items = $slider.find('> li');
            }

            $items.filter(':first').before($items.slice(-visible).clone().addClass('cloned'));
            $items.filter(':last').after($items.slice(0, visible).clone().addClass('cloned'));

            $wrapper.scrollLeft(singleWidth * visible);
			//gotopage is invoked every 10 seconds
            var autoScroll = setInterval(function(){gotoPage(currentPage + 1)},10000);
			
            function gotoPage(page) {
                var dir = page < currentPage ? -1 : 1,
                    n = Math.abs(currentPage - page),
                    left = singleWidth * dir * visible * n;

                $wrapper.filter(':not(:animated)').animate({
                    scrollLeft: '+=' + left
                }, 2000, function () {
                    if (page === 0) {
                        $wrapper.scrollLeft(singleWidth * visible * pages);
                        page = pages;
                    } else if (page > pages) {
                       ...