滑块中的图像计数（1/10）

Question

It's a slide of images that have auto fadeIn and also I can control it by the arrows in the bottom left (next and prev arrows). The problem it's that I want to show a total of images and the current number of the one we are watching (like the numbering between the arrows), I have made the markup but I have search a lot on how to programming the number but couldn't find anything similar. Can someone help me out please?

This is the markup:

<div id="slideshow">
    <ul id="slides">
        <li><img src="img/project_image.jpg" /></li>
        <li><img src="img/project_image2.jpg"/></li>
        <li><img src="img/project_image3.jpg" /></li>
        <li><img src="img/project_image4.jpg" /></li>
    </ul>
</div>

<div class="project_navigation" class="clearfix">
    <ul id="nav">
        <li id="prev"><a href="#">Previous</a></li>
        <div class="project_number">
            <p>10/12</p>
        </div>
        <li id="next"><a href="#">Next</a></li>
    </ul>
</div>

This is how I call the slider:

  $("#slideshow").css("overflow", "hidden");

  $("ul#slides").cycle({
      fx: 'fade',
      pause: 1,
      prev: '#prev',
      next: '#next'
  });

And i'm using this plugin: http://jquery.malsup.com/cycle/

Answer 1

See for onPrevNextEvent callback function of this plugin.

$("ul#slides").cycle({
      fx: 'fade',
      pause: 1,
      prev: '#prev',
      next: '#next',
      onPrevNextEvent : function(isNext, zeroBasedSlideIndex, slideElement){
           $('.project_number p').text(zeroBasedSlideIndex+'/'+$("ul#slides img").length);
      }
  });

Doesnt test this code, but maybe onPrevNextEvent is fired before the cycle is done. In this case, you should look at isNext parameter or onAfter event.