JSFiddle - React, Tailwind, and code Playground

by bhatnagar018

HTML

<div>
    <ul id="ticker_01" class="ticker">
        <li>Text 1</li>
        <li>Text 2</li>
        <li>Text 3</li>
        <li>Text 4</li>
        <li>Text 5</li>
    </ul>
</div>

CSS

.ticker {
    width:70px;
    height: 20px;
    overflow: hidden;
    margin: 0;
    padding: 0;
    list-style: none;
    border-radius: 5px;
    -moz-box-shadow: 7px 7px 5px #888;
    -webkit-box-shadow: 7px 7px 5px #888;
    box-shadow: 7px 7px 5px #888;
}

JavaScript

function tick() {
     $('#ticker_01 li:first').slideUp(function () {
         $(this).appendTo($('#ticker_01')).slideDown();
     });
 }
 var refreshIntervalId = setInterval(function () {
     tick();
 }, 2000);

 $("#ticker_01").mouseover(function () {
     clearInterval(refreshIntervalId);
 });
 $("#ticker_01").mouseleave(function () {
     refreshIntervalId = setInterval(function () {
         tick();
     }, 2000);
 });