JSFiddle - React, Tailwind, and code Playground

HTML

Контент Контент Контент Контент Контент Контент Контент Контент
<p>КонтентКонтентКонтентКонтентКонтентКонтентКонтент</p>

CSS

.slider {
  height: 100%;
  left: 0;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: -1;
}
.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 = ['http://www.zastavki.com/pictures/1366x768/2005/Animals_Cats__001795_1.jpg', 'http://www.nastol.com.ua/pic/201203/1280x800/nastol.com.ua-18496.jpg'],
		delay = 3000,
		activeImage, index = 0,
    slider = document.createElement('div');

for(var img, i = 0; i < images.length; i++) {
		img = new Image();
    img.alt = '';
    img.src = images[i];
    slider.appendChild(img);
}

slider.className = 'slider';
document.body.appendChild(slider);

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

changeImage();
setInterval(changeImage, delay);