add paginated dots and text captions to small jQuery carousel

Question

I would like to enhance already implemented slider as seen below; to now have simple dotted pagination and small show caption text area. (Caption text to appear under each image slide)

JSFIDDLE / DEMO Updated Fiddle!

Image sample of dotted-pagination and caption effect I would like to implement:

jQuery:

jQuery(document).ready(function(){
    /**
     * Check if first li element is hidden
     * then show
     */
    if( jQuery('.carouselNav li:first-child').is(':hidden') ) {
        // Toggle visibility
        jQuery('.carouselNav li:first-child').toggle();
    }
    // Interval time
    var carouselInterval = 5000;
    // Slider
    function carouselSlide(){
        // Check if last element was reached
        if( jQuery('.carouselNav li:visible').next().length == 0 ) {
            // Hide last li element
            jQuery('.carouselNav li:last-child').slideUp('fast');
            // Show the first one
            jQuery('.carouselNav li:first-child').slideDown('fast');
        } else {
            // Rotate elements
            jQuery('.carouselNav li:visible').slideUp('fast').next('li:hidden').slideDown('fast');
        }
    }
    // Set Interval
    var carouselScroll = setInterval(carouselSlide,carouselInterval);
    // Pause on hover
    jQuery('.carousel').hover(function() {
        clearInterval(carouselScroll);
    }, function() {
        carouselScroll = setInterval(carouselSlide,carouselInterval);
        carouselSlide();
    });
});

Mark-Up:

    <section id="slideShowHold" class="floatLeft"><!-- slider wrap -->

    <div class="carousel">
        <ul class="carouselNav">
            <li>
                <a href="#"><img src="images/states/state1.jpg" /></a>
            </li>
            <li>
                <a href="#"><img src="images/states/state2.jpg" /></a>
            </li>
            <li>
                <a href="#"><img src="images/states/state3.jpg" /></a>
            </li>
        </ul>
    </div>

    </section><!--slideShowHold-->

Answer 1

HTML :

<div class="carousel">
    <ul class="carouselNav">
        <li>
            <a href="#"><img src="http://st.depositphotos.com/2274151/3518/i/950/depositphotos_35186513-Sample-grunge-blue-round-stamp.jpg" /></a>
        </li>
        <li>
            <a href="#"><img src="http://st.depositphotos.com/2274151/3518/i/950/depositphotos_35186513-Sample-grunge-blue-round-stamp.jpg" /></a>
        </li>
        <li>
            <a href="#"><img src="http://st.depositphotos.com/2274151/3518/i/950/depositphotos_35186513Sample-grunge-blue-round-stamp.jpg" /></a>
        </li>
    </ul>


</div>
   <div class="carouselPagination">
       <ul >
        <li>
            O
        </li>
        <li>
            O
        </li>
        <li>
            O
        </li>
    </ul>


   </div>
</section><!--slideShowHold-->

JS :

jQuery(document).ready(function(){
    /**
     * Check if first li element is hidden
     * then show
     */
    if( jQuery('.carouselNav li:first-child').is(':hidden') ) {
        // Toggle visibility
        jQuery('.carouselNav li:first-child').toggle();
         jQuery('.carouselPagination li:first-child').addClass('active');
    }
    // Interval time
    var carouselInterval = 5000;
    // Slider
    function carouselSlide(){
        // Check if last element was reached
        if( jQuery('.carouselNav li:visible').next().length == 0 ) {
            // Hide last li element
            jQuery('.carouselNav li:last-child').slideUp('fast');
            // Show the first one
            jQuery('.carouselNav li:first-child').slideDown('fast');

            jQuery('.carouselPagination li:last-child').removeClass('active');
            jQuery('.carouselPagination li:first-child').addClass('active');
        } else {
            // Rotate elements
            jQuery('.carouselNav li:visible').slideUp('fast').next('li:hidden').slideDown('fast');
            jQuery('.carouselPagination active').removeClass('active').next('li').addClass('active');
        }
    }
    // Set Interval
    var carouselScroll = setInterval(carouselSlide,carouselInterval);
    // Pause on hover
    jQuery('.carousel').hover(function() {
        clearInterval(carouselScroll);
    }, function() {
        carouselScroll = setInterval(carouselSlide,carouselInterval);
        carouselSlide();
    });
});

CSS :

img { max-width: 300px; }

.carousel img { 
    border: 2px solid #0b0b0b;
}
.carousel {
    text-align: center;
}
.carousel ul {
    list-style: none;
}
.carousel li {
    display: none;
}

li.active{color:red;}

And you can make what you want with li.active and change 'O' to an image or what you want, enjoy.