JSFiddle - React, Tailwind, and code Playground

by tatygrassini

HTML

<div class="slideshow">
    <h1>Text</h1>
    <input type="button" value="Hello" />
</div>

<ul>
    <li><a href="#"><img src="http://placehold.it/50x50"></a></li>
    <li><a href="#"><img src="http://placehold.it/50x50/123456"></a></li>
    <li><a href="#"><img src="http://placehold.it/50x50/dbca98"></a></li>
</ul>

CSS

.slideshow
{
    position: relative;
    width: 350px;
    height: 150px;
}
.slideshow img
{
    position: absolute;
    width: 350px;
    height: 150px;
    z-index:-1;
}

ul {position: absolute; top: 125px; left: 75px;}

li {
    float: left;
    border: 1px solid #000;
    margin: 15px;
    
}

JavaScript

var images=new Array('http://placehold.it/250x150','http://placehold.it/250x150/123456','http://placehold.it/250x150/dbca98');
var nextimage=0;

doSlideshow();

function doSlideshow()
{
    if($('.slideshowimage').length!=0)
    {
        $('.slideshowimage').fadeOut(500,function(){slideshowFadeIn();$(this).remove()});
    }
    else
    {
        slideshowFadeIn();
    }
}
function slideshowFadeIn()
{
    $('.slideshow').prepend($('<img class="slideshowimage" src="'+images[nextimage++]+'" style="display:none">').fadeIn(500,function(){setTimeout(doSlideshow,1000);}));
    if(nextimage>=images.length)
        nextimage=0;
}