水平幻灯片列表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>

我想要第一个项目滑出＆amp;被第二项＆amp;替换等等。最终项目将“循环回”到第一个项目。这个数学逻辑很简单。

第一个项目成功滑出，但列表然后'折叠'到0高度，第二个<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);
});
});