Cycle2 carousel click on thumbnail to display content

Question

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

Actual site: http://sebastiangraz.com/projects/kbt/

(click the next and previous sections below to see the functionality)

Hi everyone, I have a little problem. I am using Cycle2 to slide some content, and currently it works fine the way I want it (check the script above). But I also want to click on each thumbnail (round cyan / blue circle) and go to that specific content, after clicking.

To clarify the following: basically there are two slides (one text and one circular sketch) that I control using the next and previous div. So when I click on the circular div, I want the corresponding text to slide.

I found this to be disabled below on this page: http://jquery.malsup.com/cycle2/demo/caro-pager.php from which I want to copy the functionality. And I tried to integrate it with my current setup, but to no avail.

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);
});

Do you have any ideas? Thank!

Answer 1

Below is the script I created that solves your problem.

fiddle

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

It gives a count of the number of slides that you use, and I subtract 1 from it, as the plugin adds another section, which is displayed in the current section.