如何在轮播 div 之外放置 Bootstrap Carousel 图像标题？

Posted 2023-02-24

【中文标题】如何在轮播 div 之外放置 Bootstrap Carousel 图像标题？

【英文标题】：How to place Bootstrap Carousel image captions outside the carousel div?

【发布时间】：2013-12-24 15:10:25

【问题描述】：

抱歉，如果此处已涵盖此内容。我尝试搜索，但只在轮播代码中找到与样式和定位标题相关的主题……

所以，我有一个包含三列的布局：

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

我不太明白如何让字幕在正确的列中正常工作。澄清一下，每张轮播幻灯片的标题都会发生变化，就像在默认轮播设置中所做的那样。我基本上想将标题从图像上移到右列。

我正在使用 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() ?>"  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/

【参考方案1】：

感谢巴斯的回答，它对我有用！ 但我不想复制内容，所以我按照自己的方式做了；）

$("#slider").on('slide.bs.carousel', function(evt) 

   var step = $(evt.relatedTarget).index();

   $('#slider_captions .carousel-caption:not(#caption-'+step+')').fadeOut('fast', function() 
        $('#caption-'+step).fadeIn();
   );
);

http://jsfiddle.net/4fBVV/3/

【参考方案2】：

基于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/

【讨论】：

非常感谢！这是完美的——正是我需要的。非常感谢！