title: Caption: Hide current element, show next one and then loop
body: <p>I'm creating a caption area to go alongside a slideshow, so as the slideshow images change; so too do the captions.</p>
  
  <p>I have had a look into this and came across <a href="https://stackoverflow.com/questions/14386395/hide-current-element-and-show-the-next-one">this old post here.</a></p>
  
  <p>I wish to do the exact same thing, the layout is:</p>
  
  <pre><code>&lt;div id="captions-container"&gt;
      &lt;div class="caption first"&gt;
       ...
      &lt;/div&gt;
      &lt;div class="caption"&gt;
      ...
      &lt;/div&gt;
      &lt;div class="caption"&gt;
       ...
      &lt;/div&gt;
      &lt;div class="caption last"&gt;
       ...
      &lt;/div&gt;  
  &lt;/div&gt;
  </code></pre>
  
  <p>The accepted answer to his question was:</p>
  
  <pre><code>$("#questions-container").find(":visible").hide().next().show();
  </code></pre>
  
  <p>My current script looks like so</p>
  
  <pre><code>$(".next").click(function() {
      $("#caption-container").find(":visible").hide().next().show();
  });
  </code></pre>
  
  <p>Which work perfectly, but I wish to add a new feature.  When the last caption has been reached, on the next click, go back to the first caption in a typical carousel loop fashion?</p>