JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://flesler-plugins.googlecode.com/files/jquery.scrollTo-1.4.2-min.js"></script>
<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 class="space"></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;
}
.space{
    width:1200px;
    height: 385px;
    display: inline-block;
    position: relative;
}

JavaScript

//Cool Content Slider
$(".block img").click(function () {
    var that = $(this).parent();    
    if ($(that).width()==100){
        $('#container').scrollTo( $(that), 500);
        $(that).animate({width:'600px', height:'385px'}, 550);                  
    }else{
        $('#container').scrollTo( $(".block:first"), 500);
        $(".block").animate({width:'100px',height:'385px'},550);
    } 
});