Fade slider

by Glynne Turner

HTML

<div id="parallax" class="parallax">
   <div class="flex-center bg1">xcbvxcv</div>
   <div class="flex-center bg2">xcvxcv
     
   </div>
   <div class="flex-center bg3"> 
   </div>
   <div class="flex-center bg4"> cxvxcv
   </div>
</div>
<section>
  xzcvxcv
</section>

CSS

*{box-sizing:border-box;margin:0;padding:0}
.parallax {  ;width:100%;height:100vh;overflow:hidden;position:fixed;}

.parallax > div { -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;background-position: center right; background-repeat: no-repeat; 
}
.flex-center{display:flex;align-items:center;height:100%}
[class^="bg"]{width:100%;height:100%;display:flex;align-items:center;}
.bg1{background:url('https://offsetprintingtechnology.com/wp-content/uploads/2019/07/it-support2.jpg')}
.bg2{background:url('https://content.fortune.com/wp-content/uploads/2021/11/GettyImages-498323251-e1635977441345.jpg')}
.bg3{background:url('https://c.pxhere.com/photos/cf/0a/server_cloud_development_business_network_connection_technology_internet-646713.jpg!d')}
.bg4{background:url('https://thanet-web-design.com/ITC/wp-content/uploads/2020/08/web-design.png')}
.bg5{background:url'https://thanet-web-design.com/ITC/wp-content/uploads/2021/02/parallax2.jpg')}
section{top:100vh;height:200vh;background:blue;display:block;width:100%;position:relative;}

JavaScript

$(".parallax > div:gt(0)").hide();

setInterval(function() { 
  $('.parallax > div:first')
    .fadeOut(1000)
    .next()
    .fadeIn(1000)
    .end()
    .appendTo('.parallax');
},  6000);