javascript - Cycle2 Carousel 事件幻灯片位于中心

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/但真的很感激一些帮助，因为我不确定从哪里开始(!)我试过使用 data-cycle-carousel-offset="40%"在 #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;   
}

在这里查看工作 fiddle :http://jsfiddle.net/m66tS/10/