3

我正在使用带有轮播寻呼机的 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%"on#cycle-2作为该用户尝试使用与我类似的问题Cycle2: Center Carousel active slide below main slideshow这不起作用，因为您无法访问最后一张幻灯片并且开始时左侧有空间。

我想我可能需要更改插件轮播脚本 - http://malsup.github.io/jquery.cycle2.carousel.js - 以满足我的需要，但真的不知道从哪里开始！非常感谢您的帮助。

4

3 回答 3

4

您需要做的是编辑 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/

于 2014-03-26T14:19:12.080 回答
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;
    }
于 2015-02-07T22:38:33.297 回答
1

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

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

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

于 2014-12-19T05:46:09.230 回答