JSFiddle - React, Tailwind, and code Playground

by Ender

HTML

<div id="big" style="width:100%">
    <div id="slider">
        <div class="item" id="item1"><img src="http://outfitinspirations.com/wp-content/uploads/rss-icon.jpg" /></div>
        <div class="item" id="item2"><img src="http://www.skidplates.com/PDFs/AcrobatIcon.jpg" /></div>
        <div class="item" id="item3"><img src="http://www.start64.com/images/win64/user/realworld-icon-editor.gif" /></div>
        <div class="item" id="item4"><img src="http://www.start64.com/images/win64/user/desktop-icon-toy.gif" /></div>
    </div>    
</div>
<br /><br /><br/><br />
<button id="slide" type="button">slide</button>

CSS

.item {text-align:center;float:left;width:50px;}
.big { width: 500px; overflow: hidden; }

JavaScript

$(function() {
    $('#slide').click(function() {
        var bigLeft = $('#big').position().left;
        var item = $('.item:eq(2)');
        var itemLeft = item.position().left;
        var itemTop = item.position().top;
        item.css({
            position: 'absolute',
            float: 'none',
            display: 'inline',
            top: itemTop,
            left: itemLeft
        }).animate({
            'left': bigLeft
        });
    });
});