JSFiddle - React, Tailwind, and code Playground

by Researcher

HTML

<!doctype html>
<html lang="en">
<head>
<title>Simplest jQuery Slideshow</title>

<style>
body {font-family:Arial, Helvetica, sans-serif; font-size:12px;}

.fadein { position:relative; height:332px; width:500px; }
.fadein img { position:absolute; left:0; top:0; }
</style>

<!--script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>
$(function(){
    $('.fadein img:gt(0)').hide();
    setInterval(function(){$('.fadein :first-child').fadeOut().next('img').fadeIn().end().appendTo('.fadein');}, 3000);
});
</script-->

</head>
<body>
<h1>Simplest jQuery Slideshow</h1>
<p>Check out the <a href="/archives/javascript/simplest-jquery-slideshow">blog post</a>.</p>
<div class="fadein">
<img src="http://farm3.static.flickr.com/2610/4148988872_990b6da667.jpg">
<img src="http://farm3.static.flickr.com/2597/4121218611_040cd7b3f2.jpg">
<img src="http://farm3.static.flickr.com/2531/4121218751_ac8bf49d5d.jpg">
</div>
</body>
</html>

JavaScript

//Simplest jQuery Slideshow by  Jonathan Snook
//http://snook.ca/archives/javascript/simplest-jquery-slideshow

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