Caption: Hide current element, show next one and then loop

Question

I'm creating a caption area to go alongside a slideshow, so as the slideshow images change; so too do the captions.

I have had a look into this and came across this old post here.

I wish to do the exact same thing, the layout is:

<div id="captions-container">
    <div class="caption first">
     ...
    </div>
    <div class="caption">
    ...
    </div>
    <div class="caption">
     ...
    </div>
    <div class="caption last">
     ...
    </div>  
</div>

The accepted answer to his question was:

$("#questions-container").find(":visible").hide().next().show();

My current script looks like so

$(".next").click(function() {
    $("#caption-container").find(":visible").hide().next().show();
});

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?

Answer 1

Something like this will work. Using length of next() to see if it exists, otherwise start at beginning

$(".next").click(function() {
    var $current=$("#captions-container .caption:visible").hide();
    var $next = $current.next().length ? $current.next() : $current.siblings('.first');
        $next.show();
});

DEMO

Answer 2

if( $("#questions-container").find(":visible").hasClass('last') ) {
    $("#questions-container .last").hide();
    $("#questions-container .first").show();
}

I haven't tested this, but something along these lines should give you the results you are looking for. Hope this helps!