JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/velocity/1.5.0/velocity.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/velocity/1.5.0/velocity.ui.min.js"></script>
<div class="buttons">
  <button class="btn btn-warning">one</button>
  <button class="btn btn-primary">two</button>
</div>
<div id="container">
  <!-- CC BY: Timelapse Lezard by Deevad -->
  <img class="first" src="http://pre02.deviantart.net/6eb5/th/pre/f/2011/237/d/2/timelapse_lezard_by_deevad-d47rwef.png">
  <!-- CC BY: The Achkinnal Falls by FerdinandLadera -->
  <img class="second" src="http://img09.deviantart.net/a98b/i/2012/272/d/4/the_achkinnal_falls_by_ferdinandladera-d5gatw1.jpg">
</div>

CSS

body
{
	margin: 0px;
	overflow: hidden;
    background-color: #000000;
}

#container
{
	width: 100%;
	height: 100%;
}

img
{
	width: 100vw;
	height: 100vh;
	object-fit: cover;
}

.buttons
{
    position: absolute;
    top: 20px;
    left: 20px;
    z-index: 999;
}

JavaScript

$(document).ready(function(){

$('.second').hide()

const showNextImage = function()
{
    $('.first')
    .velocity( 'fadeOut',
    {
        duration: 500,
        complete: function()
        {
            $('.second')
            .velocity( 'fadeIn',
            {
                duration: 500
            })
        },
    })
}

setTimeout( showNextImage, 3000 )


})