Cycle2 Carousel 活动幻灯片在中心

Question

我正在使用带有轮播寻呼机的 Cycle2，与此演示的方式相同：http://jquery.malsup.com/cycle2/demo/caro-pager.php

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

1. 活动幻灯片从左侧开始，在幻灯片 1 上
2. 然后单击幻灯片 2 时，缩略图不会移动，但第二个缩略图显示为活动状态。
3. 单击幻灯片 3 时，缩略图不会移动，但第三个缩略图（中间）变为活动状态）。
4. 单击幻灯片 4 时，所有缩略图向左移动 1 并且第四个缩略图（现在位于中间）处于活动状态。
5. 幻灯片 5、6、7 与上述相同。
6. 单击幻灯片 8 时，缩略图不会移动，但第八个缩略图会变为活动状态（现在从右数第二个）
7. 单击幻灯片 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 - 以满足我的需要，但真的不知道从哪里开始！非常感谢您的帮助。

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

您可以使用JQuery lightSlider，它支持在寻呼机始终居中的活动缩略图滑动，也有自定义回调。

http://sachinchoolur.github.io/lightslider/

http://sachinchoolur.github.io/lightslider/settings.html

Answer 3

我在上面采纳了 Bryan 的精彩回答并进行了一些更改。如果 minCurr 实际上小于偏移量（有时甚至变为负数），他的解决方案就会出现错误。 他的解决方案适用于 8 个以上的缩略图，其中 5 个可见且偏移量为 2。 但是我只有 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;
    }