JSFiddle - React, Tailwind, and code Playground

by brianeoneill

HTML

<div id="container">
    <ul>
        <li>1</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%;}
#container {height:110px; margin-bottom:20px; overflow:hidden; float:left; width:110px;}
#controls {clear:both;}
ul {list-style:none; overflow:hidden; position:relative; background:red; margin:0; padding:0; }
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') )
            .end()
            .css({
                'margin-left' : '+=105px',
                'width' : '100%'
            });     
    });
});
$('#right').on('click', function(){
    slider
        .find('li:first')
        .before( slider.find('li:last') )
        .end()
        .css({
            'margin-left' : '-=105px',
            'width' : '100%'
        });
    slider.animate({'left':'+=105px'}, 500);
});