Ken Burns Slideshow Modification - html

Question

I found a slideshow on Codepen that looks like: https://codepen.io/wh1zk1d/pen/WRJjLd
I like this one, but I just wanted the image with the Ken Burns effect, so I simplified the code:
The beauty of this code, is it's very simple :-)
#slides {
background: #000;
height: 450px;
overflow: hidden;
width: 100%;
}
#slides div {
animation: ken-burns 3s ease-out;
animation-fill-mode: both;
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
height: 100%;
width: 100%;
}
#keyframes ken-burns {
from {
transform: scale(1.2);
} to {
transform: scale(1);
}
}
<div id="slides">
<div style="background-image: url('https://images.unsplash.com/photo-1491609154219-ffd3ffafd992?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2250&q=80')"></div>
</div>
I have this working on all of my inner pages for a website I am creating, but what I'd like to do on the homepage is use the same concept, with a few modifications, to create a multi-image (4) slideshow...
The way it works right now, is it loads one image and then when the animation completes, it stops. This works great of the inner pages, but on the homepage it'd be nice if this cycled in an infinite continuous loop.
I tried to add another div with a different background image, but the code still works the same way. Loads the image in the first div, then stops.
I'm pretty sure this is a simple tweak, but could someone help me adjust what I'm already using to get multiple images (4) to work, along with a infinite continuous loop of those images?
Thanks,
Josh

Answer 1

So, I found some JS that helped me get this working :-)
The CSS has some minor adjustments...
#slides {
background: #000;
height: 450px;
overflow: hidden;
width: 100%;
}
#slides div.current {
animation: ken-burns 3s forwards;
animation-fill-mode: both;
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
height: 100%;
width: 100%;
}
#keyframes ken-burns {
0% {
opacity: 0;
transform: scale(1.2);
}
15% {
opacity: 1;
}
85% {
opacity: 1;
}
100% {
opacity: 0;
transform: scale(1);
}
}
The HTML looks a little different as well...
<div id="slides">
<div class="ini" data-imagenum="1" style="background-image: url('https://images.unsplash.com/photo-1497752531616-c3afd9760a11?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2700&q=80'); z-index: -1"></div>
<div class="" data-imagenum="2" style="background-image: url('https://images.unsplash.com/photo-1437622368342-7a3d73a34c8f?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1920&q=80'); z-index: -2"></div>
<div class="" data-imagenum="3" style="background-image: url('https://images.unsplash.com/photo-1486365227551-f3f90034a57c?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2700&q=80'); z-index: -3"></div>
<div class="" data-imagenum="4" style="background-image: url('https://images.unsplash.com/photo-1425082661705-1834bfd09dca?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2710&q=80'); z-index: -4"></div>
</div>
Then I added some JS...
$(document).ready(function () {
if ($('#slides div').length){
$('.ini').addClass('current');
var numImages = $('#slides div').length;
var i = 1;
$('body').on('webkitAnimationEnd oanimationend msAnimationEnd animationend', '.current', function() {
i ++;
$('.current').removeClass('current');
if ( i <= numImages ) {
$('*[data-imagenum="' + i +'"]').addClass('current');
} else {
i = 1;
$('*[data-imagenum="' + i +'"]').addClass('current');
}
});
}
});
This was as close to my original code as I could get!
Here is the Codepen: https://codepen.io/joshrodgers/pen/ZEQjZNr