如何将 Bootstrap Carousel 图像标题放置在 carousel div 之外? [英] How to place Bootstrap Carousel image captions outside the carousel div?

问题描述

如果这已经在此处的任何地方被覆盖，我们深表歉意.我尝试搜索，但只找到与轮播代码中的样式和定位标题相关的主题......

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

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

我不太明白如何让字幕在右栏中工作.澄清一下，标题将随着每个轮播幻灯片而变化，就像它们在默认轮播设置中所做的一样.我基本上是想将图片的标题移到右栏中.

我使用 Kirby (www.getkirby.com) 作为我的 CMS，我使用 foreach 循环来获取轮播中图像等的代码.这是我当前的代码，包括标题部分(我正在尝试移动...)

<?php $imagepage = $page->children()->first() ?><?php if($imagepage->hasImages()): ?><div id="merry-go-round" class="旋转木马幻灯片"><!-- 幻灯片包装器--><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>
<?php endforeach ?><?php endif ?></div><!--/carousel-inner --><!-- 控件--><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>这是我尝试放置轮播字幕的地方...</p></div><!--/#right -->

我已经尽力了，但我完全没有想法.我想也许我可以做一些事情，比如让标题成为一个变量:

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

但这在轮播区域之外不起作用.我猜是它不能在 foreach 循环之外工作?

无论如何，如果有人有任何建议，我将不胜感激.我一直在学习 PHP，但我不知道任何 javascript，所以我希望有一个解决方案.再说一次，我使用的是 Bootstrap 3.

这是我制作的小提琴的链接(没有所有的 php 内容……):

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

解决方案

基于 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('显示','无');$(".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('显示','无');});});

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

apologies if this has been covered anywhere here. I tried searching, but only found topics related to styling and positioning captions within the carousel code…

So, I have a layout that contains three columns:

1. The left column contains general information related to each page/project.
2. The center column contains a Bootstrap 3 carousel with images.
3. The right column is where I was planning on displaying all the captions related to the images in the center Carousel.

I can't quite figure out how to get the captions working in the right column. To clarify, the captions will change with each carousel slide, just as they do in the default carousel setting. I basically want to move the captions off the image, and into the right column.

I am using Kirby (www.getkirby.com) as my CMS and I am using a foreach loop to get the code for the images, etc. in the carousel. Here is my current code, including the caption section (which I am trying to move…)

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

I've tried by best but I am all out of ideas. I thought maybe I could do something like make the caption a variable:

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

but this doesn't work outside the carousel area. I'm guessing it's that it won't work outside of the foreach loop?

Anyway, if anyone has any suggestions I would really appreciate it. I'm learning PHP as I go along, but I don't know any javascript so I'm hoping there's a solution outside that. And again, I'm using Bootstrap 3.

Here is a link to a fiddle I made (without all the php stuff…):

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

解决方案

Based on Twitter Bootstrap Carousel - access current index

You can add the code below to your javascript (after loading 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');
});
});

also see: http://jsfiddle.net/4tMfJ/3/

这篇关于如何将 Bootstrap Carousel 图像标题放置在 carousel div 之外?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！