JSFiddle - React, Tailwind, and code Playground

by shapeshifta

HTML

<div class="slideshow">
    <img src="http://placekitten.com/g/220/320" alt="" class="fx" />
    <img src="http://placekitten.com/g/221/321" alt=""  />
    <img src="http://placekitten.com/g/222/322" alt="" />
    <img src="http://placekitten.com/g/223/323" alt="" />
    <img src="http://placekitten.com/g/224/324" alt="" />
    <img src="http://placekitten.com/g/225/325" alt="" />
</div>

CSS

.slideshow {
    position:relative;
    width:160px!important;
    height:300px;
    overflow:hidden;
    border:8px solid #fff;
    -webkit-box-shadow:1px 1px 5px #ddd;
    -moz-box-shadow:1px 1px 5px #ddd;
    -o-box-shadow:1px 1px 5px #ddd;
    box-shadow:1px 1px 5px #ddd;
}
.slideshow img {
    max-width: none;
    position:absolute;
    width:220px;
    height:320px;
    top:50%;
    left:50%;
    margin-left:-120px;
    margin-top:-150px;
    opacity:0;
    -webkit-transition-property: opacity, -webkit-transform;
    -webkit-transition-duration: 3s, 8s;
    -moz-transition-property: opacity, -moz-transform;
    -moz-transition-duration: 3s, 8s;
    -o-transition-property: opacity, -o-transform;
    -o-transition-duration: 3s, 8s;
    transition-property: opacity, transform;
    transition-duration: 3s, 8s;
}
.slideshow img {
    -webkit-transform-origin: bottom left;
    -moz-transform-origin: bottom left;
    -o-transform-origin: bottom left;
    transform-origin: bottom left;
}
.slideshow :nth-child(2n+1) {
    -webkit-transform-origin: top right;
    -moz-transform-origin: top right;
    -o-transform-origin: top right;
    transform-origin: top right;
}
.slideshow :nth-child(3n+1) {
    -webkit-transform-origin: top left;
    -moz-transform-origin: top left;
    -o-transform-origin: top left;
    transform-origin: top left;
}
.slideshow :nth-child(4n+1) {
    -webkit-transform-origin: bottom right;
    -moz-transform-origin: bottom right;
    -o-transform-origin: bottom right;
    transform-origin: bottom right;
}
.slideshow .fx:first-child + img ~ img {
    z-index:-1;
}
.slideshow .fx {
    -webkit-transform: scale(1.5) translate(30px);
    -moz-transform: scale(1.5) translate(30px);
    -o-transform: scale(1.5) translate(30px);
    transform: scale(1.5) translate(30px);
    opacity:1;
}

JavaScript

(function () {
    $('div.slideshow img').first().addClass('fx');
    
    window.setInterval(kenBurns, 4000);
    var images = $('div.slideshow img');
        numberOfImages = images.length,
        i = 1;

    function kenBurns() {
        if (i == numberOfImages) {
            i = 0;
        }
        images.eq(i).addClass('fx');

        if (i === 0) {
            images.eq(numberOfImages - 2).removeClass('fx');
        }
        if (i === 1) {
            images.eq(numberOfImages - 1).removeClass('fx');
        }
        if (i > 1) {
            images.eq(i - 2).removeClass('fx');
        }
        i++;
    }
    
    
})();