中心Cycle2旋转木马活动幻灯片

Question

我使用的是Cycle2和旋转传呼机，就像下面的演示：http://jquery.malsup.com/cycle2/demo/caro-pager.php一样

目前，演示中的活动幻灯片在左边，除非您是在最后几张幻灯片上。我想要的是：

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

见图表：

​

​

我已经把演示复制到了这里：http://jsfiddle.net/Qhp2g/1/，但是我不知道从哪里开始(！)，我真的很想得到一些帮助。我尝试在#cycle-2上使用#cycle-2，因为这个用户尝试了一个与我类似的问题-- Cycle2: Center Carousel active slide below main slideshow，但这不起作用，因为您无法访问最后的幻灯片，并且在开始时左边有空间。

我想我可能需要改变插件旋转木马脚本- http://malsup.github.io/jquery.cycle2.carousel.js -为我的需要，但真的不知道从哪里开始！非常感谢你的帮助。

Answer 1

您必须做的事情是编辑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/

Answer 2

我接受了布赖恩的精彩答案，并做了一些改变。如果minCurr实际上小于偏移量(有时甚至变为负值)，那么他的解决方案就会出现错误。他的解决方案适用于5可见和2偏移的8+缩略图，但只有6个缩略图和5个可见缩略图，偏移量为2，因此minCurr =6- (5 + 2) = -1，如果我有7个缩略图，5个可见缩略图，2个minCurr =1的缩略图，也存在同样的问题。

解决办法是改变

var minCurr = opts.slideCount - (opts.carouselVisible + offset);

至

var minCurr = opts.slideCount - (opts.carouselVisible + offset);
if(minCurr < offset ){
   var minCurr = offset;
} 

在这样做之后，我还必须为这样的情况做一些其他的调整，在结束开始的时候，单击前后偏移量，旋转木马移动得太远了。

我编辑的代码现在如下所示：

    var offset = 2; //Number of slides to offset
    // handle all the edge cases for wrapping & non-wrapping
    if ( opts.allowWrap === false ) {
        fwd = hops > 0;
        var currSlide = opts._currSlide;
        var maxCurr = opts.slideCount - (opts.carouselVisible - offset);
        var minCurr = opts.slideCount - (opts.carouselVisible + offset);
        if(minCurr < offset){
            minCurr = offset;
        }
        if(fwd){ // MOVING FORWARDS
            if ( opts.nextSlide > maxCurr && currSlide == maxCurr|| opts.nextSlide <= minCurr ) {
                hops = 0;
            }
            else if (opts.currSlide < minCurr && opts.nextSlide > maxCurr || opts.nextSlide > maxCurr){
                 hops += opts.currSlide - maxCurr;
            }
            else if (opts.currSlide < minCurr && opts.nextSlide > minCurr){
                 hops = opts.nextSlide - minCurr;  
            }
            else {
                currSlide = opts.currSlide;
            }

        } else { // MOVING BACKWARDS
            if ( opts.currSlide > maxCurr && opts.nextSlide > maxCurr || opts.currSlide <= minCurr ) {
                hops = 0;
            }
            else if (hops < -offset && opts.nextSlide < minCurr){
                hops = opts.nextSlide;
            }
            else if ( opts.currSlide > maxCurr) {
                hops += opts.currSlide - maxCurr;
            }
            else if (opts.nextSlide < minCurr){
                hops = opts.nextSlide - minCurr; 
            }
            else {
                currSlide = opts.currSlide; 
            }
        }


        moveBy = this.getScroll( opts, vert, currSlide, hops );
        opts.API.opts()._currSlide = opts.nextSlide > maxCurr ? maxCurr : opts.nextSlide;
    }