Question

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

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

左栏包含与每个页面/项目相关的一般信息。
中间栏包含带图像的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() ?>" 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 - 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/

Answer 2

感谢Bass的答案，对我有用！但我不想复制内容所以我按照我的方式做了;）

$("#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/

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

2 个答案: