JSFiddle - React, Tailwind, and code Playground

HTML

my awesome infinite scroller
© 2013 r043v
<a href="http://creativecommons.org/licenses/by-nc-sa/3.0/">under creative common by-nc-sa 3.0</a>
<br><br><br>

CSS

div { background:yellow; width:32px; margin:0 20px; height:32px; float:left; cursor:pointer; }
article { width:320px; height:32px; position:relative; background:#cccccc; overflow:hidden; float:left; } /* 120px => 3*32px + 3*8px; */
article > p { position:absolute; top:0; left:0; width:32px; height:32px; background:pink; visibility:hidden }

JavaScript

var $body = $("body");
var $a = $("<article/>");
var nbelem = 10;
var $elem = [];

for(n=0;n<nbelem;n++)
{   var $p = $("<p>"+n+"</p>");
    if(n < 3)
        $p.css({visibility:"visible",left:(4+n*40)+"px"});
    $a.append($p);
    $elem.push($p);
}

var $right = $("<div/>",{title:"more!"}).html("+");
var $left  = $("<div/>",{title:"less!"}).html("-");

$body.append($left).append($a).append($right);

var current = [0,1,2];

function getIndex(n)
{    if(n < 0) return nbelem+n;
     return n%nbelem;
}

function getNewIndex(n)
{   var newIndex = [];
    for(c=0;c<3;c++)
        newIndex[c] = getIndex(current[c]+n);
    return newIndex;
}

function moveCurrentTo(left)
{   var $e = $();
    for(c=0;c<3;c++)
        $e = $e.add($elem[current[c]]);
    $e.css("z-index",0).animate({left:left});
    return $e;
}

var locked = 0;

function showMeElems(newIndex,from)
{   if(locked) return; locked=1;
    var $elems = $();
    for(c=0;c<3;c++)
        $elems = $elems.add($elem[newIndex[c]]);
    $current = $();
     
    if(from === "left")
    {    $current = moveCurrentTo(120);
     $elems.css({left:-32,visibility:"visible",zIndex:1});
    }
    else
    {   $current = moveCurrentTo(-32);
        $elems.css({left:120,visibility:"visible",zIndex:1});
    }
 
    var animsStillToEnd = 3;
 
    for(c=0;c<3;c++)
        $elem[newIndex[c]].animate({left:(4+c*40)},function(){
            if(--animsStillToEnd === 0)
            {   current = newIndex;
                $current.css("visibility","hidden");
                locked=0;
            }
        });
}

$left.click(function(){
    showMeElems(getNewIndex(-3),"left");
});

$right.click(function(){
    showMeElems(getNewIndex(3),"right");
});