在jCarouselLite中显示位置 [英] Showing the position in jCarouselLite
问题描述
我正在将jcarousellite用于一个简单的JQuery轮播，但是我想对其进行一些更改，以使图像隐藏在最左边和最右边的项目中，但显示在中间项目上.
I'm using jcarousellite for a simple JQuery carousel, but I would like to alter it a bit so that images are hidden for the items to the far left and the far right, but shown on the middle items.
要执行此操作，尽管我需要能够一次查找在查看端口中正在显示哪些列表项.我曾尝试在源代码中进行挖掘并使用所包含的回调，但无法获得与显示的项目相符的索引号.
To do this though I need to be able to find which list items are being displayed in the view port at any one time. I've tried digging around in the source code and using the included callbacks, but I can't ever get index numbers which tally with the item being shown.
有人对此有任何经验或如何解决的想法吗?
Does anyone have any experience of this or ideas on how to solve it?
编辑
OK在某种程度上解决了这个问题，但是仍然无法正常工作. afterEnd函数内置在插件中，并提供当前可见项的对象.我使用它来提供列表元素的ID，并应用一些转换.
OK solved this to some extent, but it's still not working correctly. The afterEnd function is built into the plugin and provides an object of the currently visible items. I've used this to provide the IDs of the list elements, and apply some transitions.
问题在于这全在插件的外部"，因此，如果启用自动滚动，则所有这些代码都将被忽略.我需要某种方式将此代码插入插件的函数中，这恐怕有点卡住了.
The problem is that this is all "outside" of the plugin, so if I enable auto scrolling, all this code is ignored. I need some way of inserting this code into the functions within the plugin, and that's where I'm a bit stuck I'm afraid.
$(".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 + "");
}
});
我认为这是插件中需要将代码放入其中的函数，但我看不到它是如何工作的.
I think this is the function within the plugin that I need to get my code into, but I can't see how it works.
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;
};
推荐答案
我认为这对您有帮助:
除了上面的文章外，我还在下面设置了第241行
In addition to the above article I've set line 241 to the following
div.css({position: "relative", "z-index": "2", left: "-1144px"}); //changed the left from 0 to -1144px to allow the carousel circle to repeat offscreen
这会将整个轮播向左移动.就我而言，我将轮播转1144像素是因为我已经设置了宽度幻灯片，但是您可以轻松地动态计算出左偏移.
This shifts the entire carousel left. In my case I'm shifting the carousel 1144px because I have set width slides but you could just as easily calculate the left offset dynamically.
现在屏幕外还有2张幻灯片，我设置了.jCarouselLite({visible:6});这给了我2张中间可见的幻灯片，另外2张位于屏幕外.
Now that I have 2 slides offscreen left I set the .jCarouselLite({ visible: 6 }); this gives me 2 visible slides in the middle and another two offscreen right.
接下来将以下代码放在ul.animate()之后的任意位置；
Next place the following code anywhere after the ul.animate();
li.eq(curr+1).addClass("prev");
li.eq(curr+2).addClass("current");
li.eq(curr+3).addClass("next");
最后，请确保将正确的索引滑块设置为当前.按照链接文章的指南，我实际上是在索引8上启动轮播.
Lastly be sure to set the proper index slide to current. Following the guidelines of the linked article I'm actually starting my carousel on index 8
$(".jCarouselLite li").eq(7).addClass("prev");
$(".jCarouselLite li").eq(8).addClass("current");
$(".jCarouselLite li").eq(9).addClass("next");
要尝试弄清您上面概述的jCarousel Lite脚本的更多信息，请尝试放置alert(curr);或console.log(curr);在每个"if(o."区域之后.如果一切顺利，您将获得当前幻灯片的索引.
To try and figure out a little more about the jCarousel Lite script you've outlined above try placing alert(curr); or console.log(curr); after each of the "if(o." areas. If all goes well you'll get the index of the current slide.
这篇关于在jCarouselLite中显示位置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
