単純な JQuery カルーセルに jcarousellite を使用していますが、左端と右端のアイテムの画像が非表示になり、中央のアイテムに表示されるように少し変更したいと思います。
これを行うには、いつでもビュー ポートに表示されているリスト項目を見つけることができる必要があります。ソースコードを掘り下げて、含まれているコールバックを使用しようとしましたが、表示されているアイテムと一致するインデックス番号を取得できません。
誰かがこれを経験したり、それを解決する方法についてアイデアを持っていますか?
編集
OK はこれをある程度解決しましたが、まだ正しく動作していません。afterEnd 関数はプラグインに組み込まれており、現在表示されているアイテムのオブジェクトを提供します。これを使用して、リスト要素の ID を提供し、いくつかの遷移を適用しました。
問題は、これがすべてプラグインの「外側」にあるため、自動スクロールを有効にすると、このコードはすべて無視されることです。このコードをプラグイン内の関数に挿入する何らかの方法が必要ですが、それがちょっと行き詰まっているところです。
$(".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;
};