JSFiddle - React, Tailwind, and code Playground

HTML

<body>
<div id="container">
<div class="block"><img src="http://i.imgur.com/jYhaw.jpg"></div>
<div class="block"><img src="http://i.imgur.com/kjI5S.jpg"></div>
<div class="block"><img src="http://i.imgur.com/hkOQF.jpg"></div>
<div class="block"><img src="http://i.imgur.com/fvWBP.jpg"></div>
<div class="block"><img src="http://i.imgur.com/Ld9wS.jpg"></div>
</div>

CSS

#container{
    width:520px;
    height:385px;
    border: #000 1px solid;
    white-space:nowrap;
    overflow:hidden;
}
.block {
    width: 100px;
    height: 385px;
    display: inline-block;
    margin: 0px;
    position: relative;
    background-repeat: no-repeat;
    overflow:hidden;
}

JavaScript

$("#container div").toggle(
//function1:slides blocks

    function () {
    var ind = $(this).index();
        //moves image to the left
        $(this).animate({
            'right': ind*105+'px'
        });
        //expands image
        $(this).animate({
            width:600+'px'
        });
        //move blocks on the left of the active block left
        $('#container div').each(
            function () {
                if ($(this).index() < ind ){
                    $(this).animate({ 
                    'right': '600px'
                    });
                   }
            }
        );
},

//function2: resets blocks

    function() {
    var position = $.data(this, 'position');
    var ind=$(this).index();
        //contracts image
        $(this).animate({
            width:100+'px'
        });
        //moves image back to original position
        $('#container div').each(
            function () {
                $(this).animate({
                    right: "" ,
                    left: ""
                    });
            }
        );
    }
);