Cycle2轮播单击缩略图以显示内容

Question

http://jsfiddle.net/r29A9/4/

实际网站:http://sebastiangraz.com/projects/kbt/

(单击下面的下一个和上面的div来查看功能)

大家好我有一个小问题.我正在使用Cycle2来滑动一些内容,目前它的工作方式正常我想要它(请查看上面的小提琴).但我也希望能够点击每个缩略图(圆形青色/蓝色圆圈)并点击后转到该特定内容.

进一步澄清:基本上有两个幻灯片(一个文本和一个圆形缩略图),我用下一个和prev div控制.所以当我点击圆形div时,我希望相应的文本可以滑入.

我在这个页面上发现了这个:http://jquery.malsup.com/cycle2/demo/caro-pager.php,我希望从中复制功能.我试图将它与我目前的设置集成,但无济于事.

var slideshows = $('.cycle-slideshow').on('cycle-next cycle-prev', function(e, opts) {
// advance the other slideshow
slideshows.not(this).cycle('goto', opts.currSlide);
});

$('#cycle-2 .cycle-slide').click(function(){
var index = $('#cycle-2').data('cycle.API').getSlideIndex(this);
slideshows.cycle('goto', index);
});

你们有什么想法吗？谢谢!

Answer 1

请在下面找到我创建的小提琴,它可以解决您的问题

小提琴

($("#carousel1 .readmore").length - 1)

给出你正在使用的幻灯片数量的计数,我从中减去1,因为插件增加了一个部分,这是显示的当前部分.