[Solved] (Cycle) Multiple slideshows in tabs - how to show correct image counts for each?

[Solved] (Cycle) Multiple slideshows in tabs - how to show correct image counts for each?

I have Cycle slideshows within each of a variable number of tabs, with Prev/Next buttons and an image count indicator.

Everything is working apart from the image count, which has these problems:

Total count is initially that of the slideshow in the last tab on the page. When I move to another image the total shows the correct number, but...

The current image number does not change between tabs. If I advance to image 3 and move to another tab, then it also shows image 3 as current until advanced, whereupon the correct image and total are displayed.


The image count code is that from http://jquery.malsup.com/cycle/count.html - I've tried moving it inside the .each() statements without success.  

If a pager is added, all tabs show the correct number of images, but how to bring this about for the image count indicator?

JS
  1. // Cycle

  3. $('.slide-wrapper').each(function(){
  4. // add slide navigation
  5.   $(this).append('<a id="prev-slide">< Prev&nbsp;</a><a id="next-slide">&nbsp;Next ></a><p class="count"></p>');
  6.     $('.slide',this).cycle({
  7.     next: $(this).find('#prev-slide'),
  8.     prev: $(this).find('#next-slide'),
  9.     timeout: 0,
  10.     after: onAfter
  11.     });
  12. });

  14. // Cycle image count
  15. function onAfter(curr,next,opts) {
  16.   var caption = 'Image ' + (opts.currSlide + 1) + ' of ' + opts.slideCount;
  17.   $('.count').html(caption);
  18. } 

HTML
  1. <div id="content">

  3. <div class="tabs-container"><h2>Slideshow 1</h2>
  4. <div class="slide-wrapper">
  5. <div class="slide">

  7. <img src="image_01.jpg" alt="" />
  8. <img src="image_02.jpg" alt="" />
  9. <img src="image_03.jpg" alt="" />

  11. </div>  
  12. </div>
  13. </div>

  15. <div class="tabs-container"><h2>Slideshow 2</h2>
  16. <div class="slide-wrapper">
  17. <div class="slide">

  19. <img src="image_04.jpg" alt="" />  
  20. <img src="image_05.jpg" alt="" />
  21. <img src="image_06.jpg" alt="" />
  22. <img src="image_07.jpg" alt="" />

  24. </div>  
  25. </div>
  26. </div>

  28. </div><!-- / #content -->