javascript – Cycle2 Carousel活动幻灯片在中心

我正在使用带有旋转木马寻呼机的Cycle2,方法与此演示相同： http://jquery.malsup.com/cycle2/demo/caro-pager.php

目前,演示中的活动幻灯片位于左侧,除非您在最后几张幻灯片中.我想要的是：

>在活动幻灯片上从左侧开始,在幻灯片1上
>然后单击幻灯片2时,缩略图不会移动,但第二个缩略图显示为活动状态.
>单击幻灯片3时,但第三个缩略图(中间)变为活动状态).
>单击幻灯片4时,所有缩略图都会向左移动一个缩略图,而第四个缩略图(现在位于中间)处于活动状态.
>与幻灯片5,6,7相同.
>单击幻灯片8时,但是第八个缩略图变为活动状态(现在从右侧第二个)
>单击幻灯片9时,但第九个缩略图变为活动状态(右侧的最后一个缩略图).

见图：

我已经将这个演示版本复制到了一个jsfiddle：http://jsfiddle.net/Qhp2g/1/,但我真的很感激一些帮助,因为我不知道从哪里开始(！)我试过在#cycle-2上使用data-cycle-carousel-offset =“40％”因为这个用户尝试了类似的问题Cycle2: Center Carousel active slide below main slideshow,这不起作用,因为你无法访问最后的幻灯片,并在开头左侧有空格.

我想我可能需要更改插件轮播脚本 – http://malsup.github.io/jquery.cycle2.carousel.js – 我的需求,但真的不知道从哪里开始！非常感谢你的帮助.

解决方法

您需要做的是编辑jquery.cycle2.carousel.js文件,并更改转换函数.我对偏移量进行了硬编码,但您可以将其编码为基于您提供的百分比(如果需要).

以下是主要变化：

var offset = 2; //Set the offset of your carousel,for 5 it will be 2.
//Use this offset to calculate the max and min slide locations.
var maxCurr = opts.slideCount - (opts.carouselVisible - offset);
var minCurr = opts.slideCount - (opts.carouselVisible + offset);

...

//Add the following conditions to account for the new minCurr
else if (hops > 0 && opts.nextSlide <= minCurr){
    hops = 0;
}
else if (hops < 0 && opts.currSlide <= minCurr){
    hops = 0;
}
else if (hops > 0 && opts.currSlide < minCurr && opts.nextSlide > minCurr){
    hops = opts.nextSlide - minCurr;   
}
else if (hops < 0 && opts.nextSlide < minCurr){
    hops = opts.nextSlide - minCurr;   
}

请看这里的工作小提琴：http://jsfiddle.net/m66tS/10/