JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://gsgd.co.uk/sandbox/jquery/easing/jquery.easing.1.3.js"></script>
<div id="featured">
    <div class="slideshow">
        <div class="slider">
            
        <img src="http://cascadesdev1.wpengine.com/wp-content/themes/Josh_just_like_old_times/thumb.php?src=/assets/sauna-thumbnail1.jpg&amp;h=250&amp;w=420&amp;zc=1&amp;q=90" height="250" width="420">

        <img src="http://cascadesdev1.wpengine.com/wp-content/themes/Josh_just_like_old_times/thumb.php?src=/assets/Madrona-Thumbnail.jpg&amp;h=250&amp;w=420&amp;zc=1&amp;q=90" height="250" width="420">
		<img src="http://cascadesdev1.wpengine.com/wp-content/themes/Josh_just_like_old_times/thumb.php?src=/assets/Contact-Us-Thumbnail.jpg&amp;h=250&amp;w=420&amp;zc=1&amp;q=90" height="250" width="420">
    
    <img src="http://cascadesdev1.wpengine.com/wp-content/themes/Josh_just_like_old_times/thumb.php?src=/assets/Timber-Rock-Thumbnail.jpg&amp;h=250&amp;w=420&amp;zc=1&amp;q=90" height="250" width="420">
        
        </div>
    </div>
</div>

CSS

body {
    background-color: #EEF;
}

#featured {
	width: 492px;
	height: 357px;
	background: url('http://cascadesdev1.wpengine.com/wp-content/themes/Josh_just_like_old_times/images/bg-featured.png') no-repeat;
    position: fixed;
}

.slideshow {
	margin-left: 35px;
    margin-top: 41px;
	position: relative;
    overflow: hidden;
    height: 250px;
}

.slider { position: absolute; }
.slider > img { float: left; }

JavaScript

var nImages = 4;
var actual = 0;

setInterval(fadeImage,2500);

function fadeImage() {
    actual = (actual == nImages-1) ? 0 : actual+1;
	$('.slider').animate({ top: -250*actual+'px' }, 800, '');
};