Горизонтальный список слайдов jQuery

99
9

У меня есть следующая разметка 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>

Я хочу, чтобы первый элемент выдвигался и был заменен вторым элементом и так далее. Конечный элемент будет "обходить круг" до первого элемента. Математическая логика для этого проста.

Первый элемент успешно открывается, но список затем "сворачивается" на высоту 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);
});
});

спросил(а) 2013-05-09T16:50:00+04:00 7 лет, 5 месяцев назад
0
Ваш ответ
Введите минимум 50 символов
Чтобы , пожалуйста,
Выберите тему жалобы:

Другая проблема