title: Image count (1/10) in a slider
body: <p>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?</p>
  
  <p>This is the markup:</p>
  
  <pre><code>&lt;div id="slideshow"&gt;
      &lt;ul id="slides"&gt;
          &lt;li&gt;&lt;img src="img/project_image.jpg" /&gt;&lt;/li&gt;
          &lt;li&gt;&lt;img src="img/project_image2.jpg"/&gt;&lt;/li&gt;
          &lt;li&gt;&lt;img src="img/project_image3.jpg" /&gt;&lt;/li&gt;
          &lt;li&gt;&lt;img src="img/project_image4.jpg" /&gt;&lt;/li&gt;
      &lt;/ul&gt;
  &lt;/div&gt;
  
  &lt;div class="project_navigation" class="clearfix"&gt;
      &lt;ul id="nav"&gt;
          &lt;li id="prev"&gt;&lt;a href="#"&gt;Previous&lt;/a&gt;&lt;/li&gt;
          &lt;div class="project_number"&gt;
              &lt;p&gt;10/12&lt;/p&gt;
          &lt;/div&gt;
          &lt;li id="next"&gt;&lt;a href="#"&gt;Next&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>This is how I call the slider:</p>
  
  <pre><code>  $("#slideshow").css("overflow", "hidden");
  
    $("ul#slides").cycle({
        fx: 'fade',
        pause: 1,
        prev: '#prev',
        next: '#next'
    });
  </code></pre>
  
  <p>And i'm using this plugin:
  <a href="http://jquery.malsup.com/cycle/" rel="nofollow">http://jquery.malsup.com/cycle/</a></p>