BODY BACKGROUND SLIDER-7
.
.
.
.
<style>
html, body {margin:0;padding:0}
body {background:#173377;}
.container {margin:0;padding:0;width:1600px;height:900px;position: relative;}
.container .slide {
z-index: 1;
margin:0;padding:0;
position: absolute;
width: 100%;
top: 0;
left: 0;
height: 100%;
transition: opacity 1s ease-in-out;
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
opacity: 0;}
.container .slide.show {opacity: 1;}
</style>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>
<script>
function cycleBackgrounds() {
var index = 0;
$imageEls = $('.container .slide');
setInterval(function () {
index = index + 1 < $imageEls.length ? index + 1 : 0;
$imageEls.eq(index).addClass('show');
$imageEls.eq(index - 1).removeClass('show');
}, 4000);
};
// Document Ready.
$(function () {
cycleBackgrounds();
});
</script>
<div class="container">
<div class="slide show" style="background-image: url('http://i.imgur.com/fiVofHI.jpg');"></div>
<div class="slide" style="background-image: url('http://i.imgur.com/rcivwQJ.jpg');"></div>
<div class="slide" style="background-image: url('http://i.imgur.com/0nyxX2L.jpg');"></div>
<div class="slide" style="background-image: url('http://i.imgur.com/rcivwQJ.jpg');"></div>
<div class="slide" style="background-image: url('http://i.imgur.com/0nyxX2L.jpg');"></div>
</div>
