JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://code.jquery.com/ui/jquery-ui-git.css">
<script src="http://code.jquery.com/ui/jquery-ui-git.js"></script>
<div>Scroll down...and wait</div>
<ul>
    <li>1</li>
    <li>Bubble up</li>
    <li>3</li>
    <li>4</li>
    <li>End sliding</li>
</ul>

<div id='slider'></div>
<h1>Heading</h1>
<p>Paragraph</p>

CSS

div{ height: 600px; }
li:first-child{ display:block }
li{ display:none; }
#slider { margin:10px; }
p{ height:100px }

JavaScript

// Updated

var list = $("ul").find("li");
var slider = $("#slider");

function start() {
    var val = slider.slider("value");
    if (val === 4) {
        clearInterval(interval);
    }
    list.each(function() {
        list.css("display", "none");
    });
    slider.slider( "value", val + 1 );
    list.eq(val).css("display", "block");
}
var interval = setInterval(start, 5000);

slider.slider({
    animate: "slow", // Comment this line for no bubbling
    max: 5,
    min: 1
});