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时，缩略图不会移动，第九个缩略图变为活动状态（右侧的最后一个缩略图）。

请参见下图：

我已将演示复制到jsfiddle中，链接为http://jsfiddle.net/Qhp2g/1/，但由于不知从何处入手，真的需要一些帮助。我尝试在#cycle-2上使用data-cycle-carousel-offset="40%"，因为这个用户与我遇到了类似的问题Cycle2: Center Carousel active slide below main slideshow，但这并不起作用，因为您无法访问最后的幻灯片，在开始时左侧有空间。

我认为我可能需要更改插件carousel脚本http://malsup.github.io/jquery.cycle2.carousel.js以满足我的需求，但真的不确定从哪里开始！非常感谢任何帮助。

- Sarah

---

我正在考虑使用API的cycle-before事件，在转换触发之前更改偏移量。http://jquery.malsup.com/cycle2/api/ - Sarah

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/

- Bryan

---

谢谢！最终我将carousel.js文件中的转换函数注释掉，并使用“cycle-after”事件以自己的方式移动旋转木马，类似于您使用currSlide，nextSlide与幻灯片总数进行比较的方式来解决问题。不过您的方法看起来更好 :) - Sarah

Answer 2

我已经采用了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);

to

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;
    }

- nicole2292

Answer 3

你可以使用 JQuery lightSlider，它支持在页码上始终居中的活动缩略图滑块，并且具有自定义回调以进行定制化。

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

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

- Joko Wandiro