php - 如何将 Bootstrap Carousel 图像标题放置在 carousel div 之外？

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。

这是我制作的 fiddle 的链接(没有所有 php 的东西……):

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

Answer 1

基于 Twitter Bootstrap Carousel - access current index

您可以将下面的代码添加到您的 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/