JSFiddle - React, Tailwind, and code Playground

by joplomacedo

HTML

<div class="box">
    <div></div><div></div><div></div>
</div>

CSS

* { -moz-box-sizing: border-box; box-sizing: border-box; }

.box {
    overflow: hidden;
    white-space: nowrap;
}

.box > div {
    display: inline-block;
    height: 200px;
    width: 100%;
    border: 1px solid black;
    -webkit-transition: 0.6s;
}

.box > div:nth-child(0) {background: red;}
.box > div:nth-child(1) {background: blue;}
.box > div:nth-child(2) {background: grey;}

.box > div.active {
    //background: red;
}

JavaScript

(function ($) {
    var timeout,
        els = $('.box').children(),
        el = els.first().addClass('active'),
        el0 = el,
    
        startCycle = function () {
            function f() {
                el.removeClass('active');
                el = el.next().length ? el.next() : el0;
                el.addClass('active');
                el0.css({'margin-left': '-' + (el.index()*100) +'%'});
                timeout = setTimeout(f, 3000);
            }
            
            timeout = setTimeout(f, 3000);
        };
     
    els.on({
        mouseover: function (e) {
            var tg = $(e.target);
            if ( !tg.hasClass('active') ) {
                el.removeClass('active');
                el = tg.addClass('active');
                el0.css({'margin-left': '-' + (el.index()*100) +'%'});
            }
            clearTimeout(timeout);
        },
        mouseleave: function () {
            startCycle();
        }
    });
    
    startCycle();
})(jQuery);