問題描述

如果這已經在此處的任何地方被覆蓋，我們深表歉意.我嘗試搜索，但只找到與輪播代碼中的樣式和定位標題相關的主題......

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

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 之外?的文章就介紹到這了，希望我們推薦的答案對大家有所幫助，也希望大家多多支持html5模板網！