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

问题描述

很抱歉，如果在这里的任何地方都涉及到此内容.我尝试搜索，但只在轮播代码中找到了与样式和字幕相关的主题……

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. 左列包含与每个页面/项目有关的常规信息.
2. 中间一栏包含带有图像的Bootstrap 3转盘.
3. 我打算在右列显示与轮播"中心中的图像有关的所有标题.

我不太清楚如何在右侧栏中显示字幕.需要说明的是，字幕会随着每个转盘幻灯片而变化，就像它们在默认转盘设置中一样.我基本上想将标题从图像上移到右边的列中.

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.

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

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

，但是在轮播区域外无法使用.我猜是因为它在foreach循环之外无法正常工作?

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

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

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.

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

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

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

推荐答案

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

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

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');
});
});

另请参阅: http://jsfiddle.net/4tMfJ/3/

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