JSFiddle - React, Tailwind, and code Playground

by naveen

HTML

<p>Slideshow</p>
    
<ul id="slider">
    <li>
        <div>
            <p>This is div 1</p>
        </div>
    </li>
    <li>
        <div>
            <p>This is div 2</p>
        </div>
    </li>
    <li>
        <div>
            <p>This is div 3</p>
        </div>
    </li>
</ul>

CSS

#slider
{
    float: left;
    height: 100px;
    width: 200px;
}
#slider li
{
    background-color: #ddd;
    display: block;
    position: absolute;
    height: 100px;
    width: 200px;
}

JavaScript

$('#slider li:gt(0)').hide();
setInterval(
    function () {
        $('#slider li:first-child')
            .fadeOut()
            .next('li')
            .fadeIn()
            .end()
            .appendTo('#slider');
    }
, 3000);