JSFiddle - React, Tailwind, and code Playground

by Paul Leech

HTML

<div id="slideshow">
    <img src="http://placekitten.com/200/300" title="test1"/>
    <img src="http://placekitten.com/200/200" title="test2"/>
    <img src="http://placekitten.com/200/100" title="test3"/>
</div>
<div id="caption"></div>
<div id="previous">Previous</div><div id="next">Next</div>

CSS

#slideshow {
    width: 700px;
    height: 400px;
    padding: 0;
    position: relative;
    overflow: hidden;
    border: 1px solid;
}

#slideshow img {
    position: absolute;
    height: 500px;
    width: 700px;
}

JavaScript

var speed = 2000;
run = setInterval("switchSlide()", speed);
$(document).ready(function() {
    
    $('#caption').html($('#slideshow img:first').attr('title'));

    $('#slideshow img:gt(0)').hide();
 
    $('#previous').click(function() {
        $('#slideshow img:first').fadeOut(1000);
        $('#slideshow img:last').fadeIn(1000).prependTo('#slideshow');
        $('#caption').html($('#slideshow img:first').attr('title'));
    });
  
    $('#next').click(function() {
        $('#slideshow img:first').fadeOut(1000).next().fadeIn(1000).end().appendTo('#slideshow');
        $('#caption').html($('#slideshow img:first').attr('title'));
    });
    
});

function switchSlide()
{
    $('#slideshow img:first').fadeOut(1000).next().show().end().appendTo('#slideshow');
    $('#caption').html($('#slideshow img:first').attr('title'));
}