Cycle2轮播点击缩略图显示内容

Question

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

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

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

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

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

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

fiddle

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

计算您正在使用的幻灯片数量，我从中减去 1，因为插件添加了一个部分，即当前显示的部分。