JSFiddle - React, Tailwind, and code Playground

by zlojnaxa

HTML

<div id="slider">
	<div id="one"></div>
	<div id="two"></div>
</div>

<div id="exampleBOX">
	<div id="exampleDIV">
		exampleDIV
	</div>
</div>

CSS

html, body{margin: 0px 0px 0px 0px; width:  100%;}

#slider{
	width: 100%;
	height: 100%;
	position: fixed;
}

#one{
	width: 100%;
	height: 100%;
	background-size: cover;
    background-repeat: no-repeat;
    background-position: 0px 0px;
	position: absolute;
	transition: 1s;
}
#two{
	width: 100%;
	height: 100%;
	background-size: cover;
    background-repeat: no-repeat;
    background-position: 0px 0px;
	position: absolute;
	transition: 1s;
}

#exampleBOX{
	width: 650px;
	height: 1500px;
	margin: 0px auto 0px auto;
	position: relative;
}

#exampleDIV{
	width: 100%;
	height: 36%;
	color: #fff;
	background: rgba(0, 39, 255, 0.5);
	padding: 5px;
	position: absolute;
	margin: 70px auto 0px auto;
	text-align: center;
	font-family: comic sans ms;
	letter-spacing: 8px;
	line-height: 500px;
	font-size: 75px;
	border-radius: 40px;
	border: 3px solid #fff;
}

JavaScript

viewImages({
	img : [
		"https://wallbox.ru/resize/2560x1440/wallpapers/main/201118/754e9ee67cfed3f5667a1836e6b4757b.jpg",
	    "https://mota.ru/upload/wallpapers/source/2016/11/21/11/05/50928/mota.ru_2016112130.jpg",
	    "https://wallbox.ru/resize/2560x1440/wallpapers/main/201131/new-york-gorod-oboi-1376305.jpg",
	    "https://cdn.wallpapersafari.com/20/94/y0ZWac.jpg"
	],
	speed : 2
});

function viewImages(props){
	let i = 0, one = document.getElementById("one"), two = document.getElementById("two"), timeout, speed = props.speed * 1000, changeSrc = props.speed * 1000 + 900, elems = [two, one];
	one.style.backgroundImage = 'url(' + props.img[0] + ')', two.style.backgroundImage = 'url(' + props.img[1] + ')';
	changeImg();
	function changeImg(){
		elems.reverse();
		elems[0].style.opacity = 1,
		elems[1].style.opacity = 0;
		setTimeout(()=> elems[1].style.backgroundImage = 'url(' + props.img[i] + ')', changeSrc);
		i == props.img.length - 1 ? i = 0 : i++;
		timeout = setTimeout(changeImg, speed);
	}
}