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

Question

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

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

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

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

进一步澄清:基本上有两张幻灯片(一张文本和一张圆形缩略图)由下一个和上一个 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

fiddle

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

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