JSFiddle - React, Tailwind, and code Playground

by Harsh Bhatnagar

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);
    }
});