JSFiddle - React, Tailwind, and code Playground

by nate

HTML

<div id="xml" class="fn_container">
    <ul>
       <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
       <li>Aliquam tincidunt mauris eu risus.</li>
       <li>Vestibulum auctor dapibus neque.</li>
    </ul>
	       
</div>

CSS

#xml {
    background: #333;
    color: #fff;
    font-family: sans-serif;
    overflow: hidden;
    position: relative;
}

ul {
    margin: 0; padding: 0;
    position: relative;
}
ul li {
    display: block;
    float: left;
    margin: 0; padding: 5px;
}

JavaScript

var $ul = $('.fn_container ul');
var containerWidth = $('#xml').outerWidth();
var $children = $ul.children();
var $firstChild = $children.first();
var liWidthTot = 0;

$children.each(function (i, item) {
    liWidthTot += $(item).outerWidth();
});

window.newsflash = {};

// Set initial dimensions
$ul.height($firstChild.outerHeight());
$ul.width(liWidthTot);
$ul.css('left', 0);

var animateLeft = function () {
    var left = parseInt($ul.css('left'), 10);

    if (Math.abs(left) >= liWidthTot) {
        $ul.css('left', containerWidth);
    } else {
        $ul.css('left', left - 1);
    }
};

window.newsflash.interval = setInterval(animateLeft, 10);

//handler
$("#xml").on({
    mouseenter: function(){
        clearInterval(window.newsflash.interval);
    },
    mouseleave: function(){
        window.newsflash.interval = setInterval(animateLeft, 10);
    }
});