JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<head>

    <title>jQuery animate background image</title>
    <!--<script type="text/javascript" src="http://www.protofunc.com/scripts/jquery/backgroundPosition/jquery.backgroundPosition.js"></script>-->
    
</head>
<body>

<ul id="indexSlides">
    <li id="messageBox">
    </li>
    <li id="slideA">
      <p>Some Text</p>
    </li>
    <li id="slideB">
      <p>Some more Text</p>
    </li>
    <li id="slideC">
      <p>Some different Text</p>
    </li>
    <li id="slideD">
      <p>Some Text</p>
    </li>
</ul>

</body>
</html>

CSS

ul#indexSlides {
    height: 500px;
    background: url('http://i.stack.imgur.com/W3Ilg.gif');
    background-color: transparent;
    background-position:0px 0px;
    background-repeat:no-repeat;
    position:relative;
}

ul#indexSlides > li > p {
    display: none;
}

JavaScript

// function to slide the background of the list

setInterval(function() {
    $("#indexSlides").animate({backgroundPosition: '0px -500px'}, 1500);
}, 5000);