中央的Cycle2轮播活动幻灯片 [英] Cycle2 Carousel active slide in center

问题描述

我正在使用带有轮播寻呼机的Cycle2，与本演示相同:

I am using Cycle2 with a carousel pager, in the same way as this demo: http://jquery.malsup.com/cycle2/demo/caro-pager.php

当前，演示中的活动幻灯片在左侧，除非您在最后几张幻灯片上.我想要的是:

Currently the active slide in the demo is on the left unless you are on the last few slides. What I would like is:

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:中心轮播活动幻灯片位于主幻灯片下方，由于您无法进行操作，因此此方法不起作用访问最后一张幻灯片，开始时在左侧有空白.

I have copied the demo to a jsfiddle here: http://jsfiddle.net/Qhp2g/1/ but would really appreciate some help as I'm not sure where to start(!) I have tried using data-cycle-carousel-offset="40%" on #cycle-2 as this user tried with a similar problem to me Cycle2: Center Carousel active slide below main slideshow and this does not work because you can't access the last slides and there is space on the left at the beginning.

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

I assume I may need to change the plugin carousel script - http://malsup.github.io/jquery.cycle2.carousel.js - for my needs but really not sure where to start! Thank you so much for any help.

推荐答案

您需要做的是编辑jquery.cycle2.carousel.js文件，并更改过渡功能.我对偏移量进行了硬编码，但是您可以根据需要给它的百分比对它进行编码.

The thing you will have to do is edit the jquery.cycle2.carousel.js file, and change the transition function. I hard-coded the offset, but you can probably code it to be based off of the percentage that you give it if you want.

主要更改如下:

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/

See the working fiddle here: http://jsfiddle.net/m66tS/10/

这篇关于中央的Cycle2轮播活动幻灯片的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！