如何在旋转木马div之外放置Bootstrap Carousel图像标题？

Question

如果在这里任何地方都有这个问题,请道歉.我尝试搜索,但只找到与轮播代码中的样式和定位标题相关的主题...

所以,我有一个包含三列的布局:

1. 左列包含与每个页面/项目相关的一般信息.
2. 中间列包含带图像的Bootstrap 3轮播.
3. 右栏是我计划在中心Carousel中显示与图像相关的所有标题的地方.

我无法弄清楚如何让标题在右列中运行.为了澄清,字幕将随每个轮播幻灯片而改变,就像它们在默认轮播设置中一样.我基本上想要从图像移动标题,并进入右列.

我使用Kirby(www.getkirby.com)作为我的CMS,我使用foreach循环来获取旋转木马中的图像等代码.这是我目前的代码,包括标题部分(我试图移动......)

<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 -->

我已经尽了最大努力,但我完全没有想法.我想也许我可以做一些像使标题变量的东西:

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

但这在旋转木马区域外无效.我猜它是不会在foreach循环之外工作的？

无论如何,如果有人有任何建议我会非常感激.我正在学习PHP,但我不知道任何javascript,所以我希望有一个解决方案.而且,我正在使用Bootstrap 3.

这是我制作的小提琴的链接(没有所有的PHP东西......):

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

Answer 1

基于Twitter Bootstrap Carousel - 访问当前索引

您可以将以下代码添加到您的javascript中(加载jquery/bootstrap之后)

$(function() {
$('.carousel').carousel();
var caption = $('div.item:nth-child(1) .carousel-caption');
$('#right h1').html(caption.html());
caption.css('display','none');
$(".carousel").on('slide.bs.carousel', function(evt) {


   var caption = $('div.item:nth-child(' + ($(evt.relatedTarget).index()+1) + ') .carousel-caption');
   $('#right h1').html(caption.html());
   caption.css('display','none');
});
});

另见:http://jsfiddle.net/4tMfJ/3/