Я использую jcarousellite для простой карусели JQuery, но я бы хотел немного ее изменить, чтобы изображения скрывались для предметов слева и справа, но показывались на средних предметах.
Чтобы сделать это, я должен быть в состоянии найти, какие элементы списка отображаются в окне просмотра в любое время.Я попытался покопаться в исходном коде и использовать включенные обратные вызовы, но я никогда не смог получить индексные числа, которые соответствуют отображаемому элементу.
Кто-нибудь имеет какой-либо опыт этого или идеи о том,Чтобы решить эту проблему?
РЕДАКТИРОВАТЬ
ОК, в некоторой степени решил эту проблему, но она все еще работает неправильно.Функция afterEnd встроена в плагин и предоставляет объект из видимых в данный момент элементов.Я использовал это, чтобы предоставить идентификаторы элементов списка и применить некоторые переходы.
Проблема заключается в том, что это все "за пределами" плагина, поэтому, если я включаю автоматическую прокрутку, весь этот кодигнорируются.Мне нужен какой-то способ вставить этот код в функции в плагине, и я боюсь, что вот где я немного застрял.
$(".ccvi-carousel").jCarouselLite({
btnNext: ".next",
btnPrev: ".prev",
speed: 800,
//auto: 2000,
afterEnd: function(a) {
if (start=true) {
$('li#1 .cf-img').hide();
}
left = $(a[0]).attr("id");
mid = $(a[1]).attr("id");
right = $(a[2]).attr("id");
$('.prev').click(function() {
$('li#' + left + ' .cf-img').fadeIn();
$('li#' + mid + ' .cf-img').hide();
$('li#' + right + ' .cf-img').hide();
});
$('.next').click(function() {
$('li#' + left + ' .cf-img').hide();
$('li#' + mid + ' .cf-img').hide();
$('li#' + right + ' .cf-img').fadeIn();
});
//alert("Left:" + left + "Middle:" + mid + "Right:" + right + "");
}
});
Я думаю, что эта функция в плагине мне нужначтобы получить мой код, но я не вижу, как он работает.
function go(to) {
if(!running) {
if(o.beforeStart)
o.beforeStart.call(this, vis());
if(o.circular) { // If circular we are in first or last, then goto the other end
if(to<=o.start-v-1) { // If first, then goto last
ul.css(animCss, -((itemLength-(v*2))*liSize)+"px");
// If "scroll" > 1, then the "to" might not be equal to the condition; it can be lesser depending on the number of elements.
curr = to==o.start-v-1 ? itemLength-(v*2)-1 : itemLength-(v*2)-o.scroll;
//alert (curr);
} else if(to>=itemLength-v+1) { // If last, then goto first
ul.css(animCss, -( (v) * liSize ) + "px" );
// If "scroll" > 1, then the "to" might not be equal to the condition; it can be greater depending on the number of elements.
curr = to==itemLength-v+1 ? v+1 : v+o.scroll;
//alert (curr);
} else {
curr = to;
//alert (curr);
}
} else { // If non-circular and to points to first or last, we just return.
if(to<0 || to>itemLength-v) return;
else curr = to;
} // If neither overrides it, the curr will still be "to" and we can proceed.
running = true;
ul.animate(
animCss == "left" ? { left: -(curr*liSize) } : { top: -(curr*liSize) } , o.speed, o.easing,
function() {
//alert (curr-2);
if(o.afterEnd)
o.afterEnd.call(this, vis());
running = false;
}
);
// Disable buttons when the carousel reaches the last/first, and enable when not
if(!o.circular) {
$(o.btnPrev + "," + o.btnNext).removeClass("disabled");
$( (curr-o.scroll<0 && o.btnPrev)
||
(curr+o.scroll > itemLength-v && o.btnNext)
||
[]
).addClass("disabled");
}
}
return false;
};