JSFiddle - React, Tailwind, and code Playground

HTML

<div class="slider">
  <img alt="" src="http://www.zastavki.com/pictures/1366x768/2005/Animals_Cats__001795_1.jpg">
  <img alt="" src="http://www.nastol.com.ua/pic/201203/1280x800/nastol.com.ua-18496.jpg">
</div>

CSS

.slider {
  position: relative;
}
.slider img {
  left: 0;
  opacity: 0;
  position: absolute;
  top: 0;
  -webkit-transition: all 1s;
  -moz-transition: all 1s;
  -ms-transition: all 1s;
  -o-transition: all 1s;
  transition: all 1s;
  visibility: hidden;
  width: 100%;
}
.slider img.show {
  opacity: 1;
  visibility: visible;
}

JavaScript

var images = document.querySelectorAll('.slider img'),
		delay = 3000,
		activeImage, index = 0;

function changeImage() {
		if(activeImage) {
  			activeImage.classList.remove('show');
  	}
    activeImage = images[++index % images.length];
    activeImage.classList.add('show');
};

changeImage();
setInterval(changeImage, delay);