title: Cycle2 carousel click on thumbnail to show content
body: <p><strong><a href="http://jsfiddle.net/r29A9/4/" rel="nofollow">http://jsfiddle.net/r29A9/4/</a></strong></p>
  
  <p>The actual site: <a href="http://sebastiangraz.com/projects/kbt/" rel="nofollow">http://sebastiangraz.com/projects/kbt/</a></p>
  
  <p>(click the next and prev divs below to see the functionality)</p>
  
  <p>Hi all I have a slight problem. I am using Cycle2 to slide some content and currently it's working fine the way I want it (check fiddle above). But I also want to be able to click on each thumbnail (round cyan/blue circle) and go to that specific content, once clicked. </p>
  
  <p>To clarify further: There are basically two slides (one text and one circular-thumbnails) that I'm controlling with the next and prev div. So when I click on the circular div I want the corresponding text to slide in. </p>
  
  <p>I discovered this snipped below on this page: <a href="http://jquery.malsup.com/cycle2/demo/caro-pager.php" rel="nofollow">http://jquery.malsup.com/cycle2/demo/caro-pager.php</a> which I want to sort of copy the functionality from. And I have tried to integrate it with my current setup but to no avail.</p>
  
  <pre><code>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);
  });
  </code></pre>
  
  <p>Do you guys have any ideas? Thank you!</p>