JSFiddle - React, Tailwind, and code Playground

HTML

<div class="infiniteCarousel" id="my-carousel">
    <div class="wrapper">
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
        </ul>
    </div>
</div>

CSS

* {
    margin: 0;
    border: none;
    padding: 0;
    box-sizing: border-box;
}
.infiniteCarousel {
    overflow: hidden;
    width: 400px;
}
.wrapper {
    height: 250px;
    width: 1600px;
}
.wrapper li {
    width: 400px;
    height: 250px;
    background: red;
    color: white;
    border: 5px solid green;
    float: left;
}

JavaScript

var infinite = infinite || (function (win, doc) {

    var cache = {},
    initialize = function (opts) {

        cache.element = opts.element;
        cache.easing = opts.easing;
        cache.speed = opts.speed + 's';
        cache.interval = opts.interval;
        
        var wrapper = cache.element.children[0],
            ul = wrapper.children[0],
            firstLI = ul.children[0];
        
        ul.appendChild( firstLI.cloneNode(true) );
        
        cache.numSlides = ul.children.length;
        cache.sliderWidth = parseInt(win.getComputedStyle(firstLI).width, 10);
        cache.wrapper = wrapper;
        cache.currentSlide=1;
        
        _slides.next();
        utils.transition.on();
        cache.sliderInterval = win.setInterval(_slides.next, cache.interval);
    },
    utils = {
        transition: {
            on: function () {
                cache.wrapper.style.webkitTransitionDuration = cache.speed;
                cache.wrapper.style.webkitTransitionTimingFunction = cache.easing;
            },
            off: function () {
                cache.wrapper.style.webkitTransitionDuration = '';
                cache.wrapper.style.webkitTransitionTimingFunction = '';
            }
        }
    },
    _slides = {
        next: function(){
            if((cache.currentSlide) == cache.numSlides){
                setTimeout(function(){
                    console.log('TRANS OFF, RESETTING');
                    utils.transition.off();
                    cache.currentSlide=2;
                    cache.wrapper.style.webkitTransform = "translate3d(0, 0, 0)";
                    setTimeout(utils.transition.on, 0);
                }, (cache.interval/2));
            }
            
            var newL = (cache.currentSlide-1) * cache.sliderWidth;
            cache.wrapper.style.webkitTransform = "translate3d(-" + (newL) + "px, 0, 0)";
            cache.currentSlide++;
        }
    };

    return {
        init: initialize
    };

})(window,...