JSFiddle - React, Tailwind, and code Playground

by luka kupunia

HTML

<div id="slider">
    <div id="slider-body">
        <div class="item item-1">
            <div class="img" style="background: url(http://picsum.photos/1200/900) no-repeat; background-size: cover; background-position: center;"></div>
        </div>
        <div class="item item-2">
            <div class="img" style="background: url(http://picsum.photos/1200/800) no-repeat; background-size: cover; background-position: center;"></div>
        </div>
        <div class="item item-3">
            <div class="img" style="background: url(http://picsum.photos/1200/700) no-repeat; background-size: cover; background-position: center;"></div>
        </div>
    </div>
</div>

CSS

div#slider {
    top: 50px;
    left: 50px;
    right: 50px;
    bottom: 50px;
    border: 1px solid black;
    position: absolute;
    overflow: hidden;
    /* transform: scale(0.5); */
}
div#slider-body {
    width: 100%;
    height: 100%;
    position: absolute;
    border: 1px solid red;
    animation: a cubic-bezier(0.82, 0.01, 0.08, 1.01) 1s infinite .5s;
}
@keyframes a {
    50% { transform: scale(0.8) }
    100% { transform: scale(1) }
}
div.item {
    position: absolute;
}
div.item-1 {
    width: 75%;
    height: 100%;
    transform: translate(0,-100%);
    transition: cubic-bezier(0.82, 0.01, 0.08, 1.01) .5s;
    background: red;
    top: 0;
    left: 0;
}
div#slider.active-1 div.item-1 {
    transform: translate(0,0%);
}
div.item-2 {
    width: 25%;
    height: 25%;
    background: green;
    transition: cubic-bezier(0.82, 0.01, 0.08, 1.01) .5s;
    transform: translate(0%,-150%);
    top: 0;
    left: 75%;
}
div#slider.active-1 div.item-2 {
    transform: translate(0%,0%);
}
div.item-3 {
    width: 25%;
    height: 75%;
    transform: translate(0%,140%);
    transition: cubic-bezier(0.82, 0.01, 0.08, 1.01) .5s;
    background: yellow;
    top: 25%;
    left: 75%;
}
div#slider.active-1 div.item-3 {
    transform: translate(0%,0%);
}
div.item div.img {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

JavaScript

var b = 0;
setInterval(function(){
    $('#slider').addClass('active-' + b)
    $('#slider').removeClass('active-' + (b - 1))
    if(b === 2){
        $('#slider').removeClass('active-' + (b))
        b = 0;
    }
    b++;
},1000)