JSFiddle - React, Tailwind, and code Playground

by brianeoneill

HTML

<div id="container">
    <ul>
        <li><span>1</span></li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
    </ul>
</div>
<div id="controls">
    <a href="#" id="left">Left</a>
    <a href="#" id="right">Right</a>
</div>

CSS

body {font-family:sans-serif;font-size:100%;}
#controls {position:relative; top:200px;}
#container {height:110px; margin-bottom:20px; overflow:hidden; width:110px; background:blue;}
ul {list-style:none; overflow:hidden; position:relative; background:red; margin:0; padding:0;width:440px;height:110px;}
li {height:100px; width:100px; text-align:center; line-height:100px; margin:5px; float:left; background:#333; color:#fff;}
a {display:inline-block; padding:8px; text-decoration:none; color:#000; background:#e0e0e0; border:1px solid #333;}

JavaScript

var slider = $('ul');

$('#left').on('click', function(){
    slider.animate({'left':'-=105px'}, 500, function(){
        slider.find('li:last').after( slider.find('li:first') );
        slider.css({
            'margin-left' : '+=105px',
            'width' : '440px'
        });     
    });
});
$('#right').on('click', function(){
    slider.find('li:first').before( slider.find('li:last') );
    slider.css({
        'margin-left' : '-=105px',
        'width' : '440px'
    });
    slider.animate({'left':'+=105px'}, 500);
});