Quark_,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
.swiper-container {
width: 60%;
height: 90vh;
position: relative;
overflow: hidden;
margin: 20px auto;
}
.swiper-slide {
width: 100%;
height: 100%;
position: absolute;
transition: .8s;
}
.swiper-slide img {
width: 100%;
height: 100%;
object-fit: cover;
z-index:
}
.swiper-slide.fadeOut {
opacity: 0;
}
</style>
<script>
document.addEventListener('DOMContentLoaded', function() {
var Img = document.querySelectorAll(".swiper-slide"),
ImgLength = Img.length,
ImgIndex = 0;
function show()
{
Img[ImgIndex].classList.remove("fadeOut");
window.setTimeout(hide, 2000);
}
function hide()
{
Img[ImgIndex].classList.add("fadeOut");
ImgIndex++;
ImgIndex %= ImgLength;
window.setTimeout(show, 100);
}
show()
});
</script>
</head>
<body>
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide fadeOut"><img src="http://www.gettyimages.ca/gi-resources/images/Homepage/Category-Creative/UK/UK_Creative_462809583.jpg"></div>
<div class="swiper-slide fadeOut"><img src="https://www.wonderplugin.com/videos/demo-image0.jpg"></div>
<div class="swiper-slide fadeOut"><img src="https://www.theglobeandmail.com/resizer/cGAbGpC_6dJvungK4E_3iPM0ENI=/620x0/filters:quality(80)/arc-anglerfish-tgam-prod-tgam.s3.amazonaws.com/public/AZWCHIIOVNFPREIW4I55573SRE.JPG"></div>
</div>
</div>
</body>
</html>