Question

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

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

用于在左侧，幻灯片1
然后点击幻灯片2时，缩略图不会移动，但第二个缩略图显示为活动状态。
单击幻灯片3时，缩略图不会移动，但第三个缩略图（位于中间）变为活动状态。
单击幻灯片4时，所有缩略图都会向左移动一个缩略图，并且第四个缩略图（现在位于中间）处于活动状态。
与幻灯片5,6,7相同。
单击幻灯片8时，缩略图不会移动，但第八个缩略图变为活动状态（现在是右起第二个）
单击幻灯片9时，缩略图不会移动，但第九个缩略图变为活动状态（右侧的最后一个缩略图）。

见图：

enter image description here

我已经将演示文稿复制到了jsfiddle：http://jsfiddle.net/Qhp2g/1/但我真的很感激一些帮助，因为我不知道从哪里开始（！）我尝试在{{{{}}上使用data-cycle-carousel-offset="40%" 1}}由于此用户尝试向我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

我已经采取了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;
    }

Answer 3

你可以使用JQuery lightSlider，它支持寻呼机上的活动缩略图幻灯片，也可以自定义回调来定制。

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

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

Cycle2 Carousel活动滑动在中心

3 个答案: