Need some ideas for jQuery carousel function

Question

I'm working on a jQuery image carousel/rotator, and I've gotten stuck. Normally, I use Bootstrap for my carousels, and I'd be happy to do so again - but this carousel has an extra function I don't think Bootstrap can handle. We use Smarty templates, so the carousel contents, and the number of items in the carousel are totally variable.

I've attached a graphic explaining what I would like to do. Section A on the graphic is a typical thumbnail and arrow-based carousel navigation. Section B is the current image in the carousel, which slides up from the bottom. Sections A and B are both working in Bootstrap. Section C is where I'm running into troubles. I need to display captions, cycling through the three given containers as the carousel turns. I would prefer to have the captions move from top to bottom (next caption and previous caption opposite of where I have drawn them, doh!).

If anyone knows of a plugin that can be setup or modified to do this, that would be great. I'd also like to hear any ideas anyone has of how to do this custom. I guess adding classes like .active, .previous, and .next are one way to go, but I'm not sure how to deal with the index starting over. Honestly, this is approaching the upper levels of my abilities, which is why I need an extra kick from you.

Unfortunately, I'm not in a position to share my current Bootstrap/Smarty code with you :( However, I'd be happy to answer any questions you might have.

Answer 1

Example (see also: http://bootply.com/65289 and http://bootply.com/65305)

update http://bootply.com/65305 uses data-title and data-content attributes to show the captions

jQuery Plugin

I wrapped the code below in a plugin: http://plugins.jquery.com/captionthumbcarousel/

html (including your list of images):

    <div class="container" id="firstrow">
        <div class="row-fluid">
<div class="span3" id="thumbs">
<button id="previousimage">Previous</button>    
<button id="nextimage">Next</button>
</div>          
<div class="span6" id="currentimage"></div> 
<div class="span3" id="titles"></div>           
<div id="carousal">
    <img src="http://placehold.it/350/0000FF" title="blue image 1">
    <img src="http://placehold.it/350/CCEEFF" title="yelow image 2">
    <img src="http://placehold.it/350/088A4B" title="green image 3">
    <img src="http://placehold.it/350/C47451" title="orange image 4">
    <img src="http://placehold.it/350/000000" title="black image 5">
    <img src="http://placehold.it/350/8D38C9" title="voilet image 6">
</div>  
        </div>  
    </div>

javascript:

 $('#carousal').hide();
 var number = $('#carousal img').length;
 var numberofthumbs = 4;

 var current = 0;
 var images = $.makeArray($('#carousal img').clone());
 var ci = $.makeArray($('#carousal img').clone());
 $('#nextimage').before(images[0]);
 $('#nextimage').before(images[1]);
 $('#nextimage').before(images[2]);
 $('#nextimage').before(images[3]);

 $('#titles').append('<span>' + images[number-1].title + '</span><br>');
 $('#titles').append('<span>' + images[current].title + '</span><br>');
 $('#titles').append('<span>' + images[current+1].title + '</span><br>');

 $('#currentimage').html(ci[0]);

  $('#previousimage').click(function()
 {
     $('#thumbs img').last().remove();
     $('#previousimage').after(images[(current-1+number)%number]);
     $('#titles span').last().remove();
     $('#titles br').last().remove();
     $('#titles').prepend('<span>' + images[(current-2+number)%number].title + '</span><br>');
     current = ((current-1+number)%number);
     $('#currentimage').html(ci[current]);
 });

 $('#nextimage').click(function()
 {
     $('#thumbs img').first().remove();
     $('#nextimage').before(images[(current+numberofthumbs)%number]);
     $('#titles span').first().remove();
     $('#titles br').first().remove();
     $('#titles').append('<span>' + images[(current+2)%number].title + '</span><br>');
     current = ((current+1)%number);
     $('#currentimage').html(ci[current]);
 });     

some css to style the thumbs:

   #thumbs img {width:25%; display: block;}

Maybe put your images in a list and use .html() to get a copy of the image to be more flexible.