title: Display viewable <div> as counter
body: <p>I have a carousel of divs and need to display a 'counter' of sorts - I can display the number of visible divs easily enough, but I want to display those visible as:</p>
  
  <p>1-4 of 12</p>
  
  <p>Using jQuery cycle, HTML is:</p>
  
  <pre><code>&lt;div id="wrapper"&gt;
  
  &lt;div id="carousel1"&gt;
  &lt;div class=""&gt;&lt;/div&gt;
  &lt;div class=""&gt;&lt;/div&gt;
  &lt;div class=""&gt;&lt;/div&gt;
  &lt;div class=""&gt;&lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div id="carousel2"&gt;
  &lt;div class=""&gt;&lt;/div&gt;
  &lt;div class=""&gt;&lt;/div&gt;
  &lt;div class=""&gt;&lt;/div&gt;
  &lt;div class=""&gt;&lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div id="carousel3"&gt;
  &lt;div class=""&gt;&lt;/div&gt;
  &lt;div class=""&gt;&lt;/div&gt;
  &lt;div class=""&gt;&lt;/div&gt;
  &lt;div class=""&gt;&lt;/div&gt;
  &lt;/div&gt;
  
  &lt;/div&gt;
  
  &lt;div id="counter"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>As you can see, I have 3 carousel panels... but how do I use jQuery to count the number of divs inside each panel and also the total number of these divs so that the counter displays as:</p>
  
  <p>1-4 of 12</p>
  
  <p>Thanks</p>