jquery - 横スライドリスト jQuery

Question

次の HTML マークアップがあります

<ul class="banner"> 
    <li class="current" id="0"><img src="images/first.png"/></li>
    <li id="1"><img src="images/second.png" /></li>
    <li id="2"><img src="images/third.png" /></li>
</ul>

最初のアイテムをスライドさせて 2 番目のアイテムに置き換えたい、などなど。最終項目は、最初の項目に「ループ バック」します。これの数学ロジックは単純です。

最初の項目は正常にスライドアウトしますが、リストは高さ 0 に「折りたたまれ」、2 番目の項目<li>はそれを置き換えません。

これが私がjQueryに持っているものです:

// GLOBALS
$currentBannerImage;
// Before page is created
$(document).delegate("#indexpage", "pagebeforecreate", function()
{
// Get non current banner images
$nonCurrentBannerListItems = $("ul.banner li").not(".current");
// Hide them
    if ($nonCurrentBannerListItems.size() > 0)
    {
        $nonCurrentBannerListItems.each(function()
        {
            $(this).hide();
        }
       $currentBannerImage = 0;
    }
});
});
// When page has successfully loaded & been inserted into DOM
$(document).delegate("#indexpage", "pagebeforecreate", function()
{
// Prevent default image dragging behavior on desktops
$("img").on("dragstart",function(dragEvent)
{
    dragEvent.preventDefault();
});

$("ul.banner li").swipeleft(function()
{
    // Get Swiped element id
    // Get Current Element
    $currentElementID = $currentBannerImage;

    $newElementID = $currentElementID+1;

    // Slide the touched element left
    $('#'+currentElementID).hide("slide", {direction: "left"},1000);
    $('#'+$newElementID).show("slide",{direction: "right"},1000);
});
});