disculpas si esto ha sido cubierto en cualquier lugar aquí. Intenté buscar, pero solo encontré temas relacionados con el estilo y posicionamiento de subtítulos dentro del código de carrusel ...

Entonces, tengo un diseño que contiene tres columnas:

La columna de la izquierda contiene información general relacionada con cada página / proyecto.La columna central contiene un carrusel Bootstrap 3 con imágenes.La columna de la derecha es donde estaba planeando mostrar todas las leyendas relacionadas con las imágenes en el Carrusel central.

No puedo entender cómo hacer que los subtítulos funcionen en la columna derecha. Para aclarar, los subtítulos cambiarán con cada diapositiva del carrusel, tal como lo hacen en la configuración predeterminada del carrusel. Básicamente quiero mover los subtítulos de la imagen y colocarlos en la columna de la derecha.

Estoy usando Kirby (www.getkirby.com) como mi CMS y estoy usando un bucle foreach para obtener el código de las imágenes, etc. en el carrusel. Aquí está mi código actual, incluida la sección de subtítulos (que estoy tratando de mover ...)

<div id="center" class="col-xs-12 col-sm-6 col-md-8">
    <?php $imagepage = $page->children()->first() ?>
    <?php if($imagepage->hasImages()): ?> 
    <div id="merry-go-round" class="carousel slide">
        <!-- Wrapper for slides -->
        <div class="carousel-inner">
            <?php $n=0; foreach($imagepage->images() as $image): $n++; ?>               
            <div class="item<?php if($n==1) echo ' active' ?>">
                <img style="display:block; margin-left: auto; margin-right: auto;" src="<?php echo $image->url() ?>" alt="<?php echo html($image->title()) ?>" class="img-responsive">
                <div class="carousel-caption"><?php echo $image->img_title() ?></div>
            </div>
    <?php endforeach ?>
    <?php endif ?>
        </div><!-- /carousel-inner -->
        <!-- Controls -->
        <a class="left carousel-control" href="#merry-go-round" data-slide="prev"></a>
        <a class="right carousel-control" href="#merry-go-round" data-slide="next"></a>
    </div><!-- /merry-go-round -->
</div><!-- /#center -->

<div id="right" class="col-xs-12 col-sm-3 col-md-2">
    <p>THIS IS WHERE I AM TRYING TO PUT THE CAROUSEL CAPTIONS…</p>
</div><!-- /#right -->

Lo he intentado por lo mejor pero me he quedado sin ideas. Pensé que tal vez podría hacer algo como hacer que el título sea una variable:

<?php $test_caption = $image->img_title() ?><?php echo $test_caption ?>

Pero esto no funciona fuera del área del carrusel. Supongo que es que no funcionará fuera del bucle foreach?

De todos modos, si alguien tiene alguna sugerencia, realmente la apreciaría. Estoy aprendiendo PHP a medida que avanzo, pero no conozco ningún javascript, así que espero que haya una solución fuera de eso. Y otra vez, estoy usando Bootstrap 3.

Aquí hay un enlace a un violín que hice (sin todas las cosas de PHP ...):

http://jsfiddle.net/4tMfJ/2/