J'utilise jcarousellite pour un simple carrousel JQuery, mais je voudrais le modifier un peu afin que les images soient cachées pour les éléments à l'extrême gauche et à l'extrême droite, mais affichés au milieu articles.Affichage de la position dans jCousousLite
Pour ce faire, je dois être en mesure de trouver quels éléments de la liste sont affichés dans le port d'affichage à un moment donné. J'ai essayé de creuser dans le code source et d'utiliser les rappels inclus, mais je ne peux jamais obtenir les numéros d'index qui correspondent à l'élément affiché.
Quelqu'un a-t-il une expérience de ceci ou des idées sur la façon de le résoudre?
EDIT
OK résolu cela dans une certaine mesure, mais il ne fonctionne toujours pas correctement. La fonction afterEnd est intégrée dans le plugin et fournit un objet des éléments actuellement visibles. J'ai utilisé ceci pour fournir les identifiants des éléments de la liste, et appliquer certaines transitions. Le problème est que tout cela est "en dehors" du plugin, donc si j'active le défilement automatique, tout ce code est ignoré. J'ai besoin d'un moyen d'insérer ce code dans les fonctions du plugin, et je suis un peu coincé.
$(".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 + "");
}
});
Je pense que cela est la fonction dans le plug-in que je dois obtenir mon code dans, mais je ne vois pas comment cela fonctionne.
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;
};