apologies if this has been covered anywhere here. I tried searching, but only found topics related to styling and positioning captions within the carousel code…
So, I have a layout that contains three columns:

  1. The left column contains general information related to each page/project.
  2. The center column contains a Bootstrap 3 carousel with images.
  3. The right column is where I was planning on displaying all the captions related to the images in the center Carousel.

I can't quite figure out how to get the captions working in the right column. To clarify, the captions will change with each carousel slide, just as they do in the default carousel setting. I basically want to move the captions off the image, and into the right column.
I am using Kirby (www.getkirby.com) as my CMS and I am using a foreach loop to get the code for the images, etc. in the carousel. Here is my current code, including the caption section (which I am trying to move…)

title()) ?>" class="img-responsive">




THIS IS WHERE I AM TRYING TO PUT THE CAROUSEL CAPTIONS…

I've tried by best but I am all out of ideas. I thought maybe I could do something like make the caption a variable:

but this doesn't work outside the carousel area. I'm guessing it's that it won't work outside of the foreach loop?
Anyway, if anyone has any suggestions I would really appreciate it. I'm learning PHP as I go along, but I don't know any javascript so I'm hoping there's a solution outside that. And again, I'm using Bootstrap 3.
Here is a link to a fiddle I made (without all the php stuff…):
http://jsfiddle.net/4tMfJ/2/


Check Solution