JSFiddle - React, Tailwind, and code Playground

by zlojnaxa

HTML

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

CSS

#slider{
	width: 100px;
	height: 100px;
	margin: 0px auto;
}
#slider > img{
	position: absolute;
	transition: 1s;
}

JavaScript

// В img указать, в кавычках, через запятую, адреса картинок
// В speed указать скорость смены картинок в секундах
viewImages({
	img : [
		"https://www.kv.by/sites/default/files/pictures/avatars/picture-5437-1511373081.jpg",
	    "https://is4-ssl.mzstatic.com/image/thumb/Purple71/v4/1d/4f/06/1d4f0680-2843-4c52-61a2-a5c357de7307/pr_source.png/100x100bb-85.jpg",
	    "https://pp.userapi.com/c836121/v836121298/77ea7/zcS3iC-bz5Q.jpg",
	    "https://sites.reviews/attachments/avatar/7/b/9/b/4/7b9b43683b6ec8f0bf00bbc2c51b6586_100_100_f.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.src = props.img[0], two.src = props.img[1];
	changeImg();
	function changeImg(){
		elems.reverse();
		elems[0].style.opacity = 1, elems[1].style.opacity = 0;
		setTimeout(()=> elems[1].src = props.img[i], changeSrc);
		i == props.img.length - 1 ? i = 0 : i++;
		timeout = setTimeout(changeImg, speed);
	}
}