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

Question

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

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

（单击下面的下一个和上面的div来查看功能）

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

进一步澄清：基本上有两个幻灯片（一个文本和一个圆形缩略图），我用下一个和上一个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

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

fiddle

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

给出您正在使用的幻灯片的数量＆amp;我从中减去1，因为插件增加了一个部分，这是显示的当前部分。