JSFiddle - React, Tailwind, and code Playground

HTML

Mouse over the image...
Show

<div id="slideshow">
    <img src="http://www.google.com/logos/2013/vladimir_vernadskys_150th_birthday-1103005-hp.jpg" />
    <img src="http://www.google.com/logos/2013/evert_taubes_123rd_birthday-1107007.2-hp.jpg" />
    <img src="http://www.google.com/logos/2013/andr_le_ntres_400th_birthday-1104005-hp.jpg" />
  
</div>

CSS

html, body {
    height: 100%;
}
#slideshow {
    height: auto;
    width: auto;
    margin: 5px;
    text-align: center;
}
#slideshow img {
    display: none;
    margin-left: auto;
    margin-right: auto;
    border: 2px solid #3D6AA2;
}
#slideshow img:first-child {
    display: block;
}

JavaScript

var hovering = false;
var slideshow = $("#slideshow");

slideshow.mouseenter(function() {
    hovering = true;
}).mouseleave(function() {
    hovering = false;
    slideShow();
});

function slideShow() {
    if (!hovering) {
        var currentImg = (slideshow.children("img:visible").length) ? slideshow.children("img:visible") : slideshow.children("img:first");
        var nextImg = (currentImg.next().length) ? currentImg.next() : slideshow.children("img:first");

        currentImg.delay(1000).fadeOut(500, function() {
            nextImg.fadeIn(500, function() {
                setTimeout(slideShow, 1000);
            });
        });
    }
}
$(document).ready(function() {
    slideShow();
});