軌道滑塊：字幕問題

Question

我是響應式設計的新手。 我正在嘗試為我的項目使用Foundation Orbit滑塊。 我無法顯示圖片的標題。 我有以下代碼...

<div class="row">
    <div class="twelve columns">
    <div id="slider">
    <a href="#"><img src="images/pic1.jpg" /></a>
    <a href="#"><img src="images/pic2.jpg" /></a>
    <a href="#"><img src="images/pic3.jpg" /></a>
  </div>
</div>

  <span class="orbit-caption" id="captionOne">Here is a caption1...</span>
  <span class="orbit-caption" id="captionTwo">Here is a caption2...</span>
  <span class="orbit-caption" id="captionThree">Here is a caption3...</span>
</div>

當我第一次嘗試時，它沒有用。 我嘗試查看Stackoverflow，並嘗試了commanderdemon提供的修復程序。 仍然沒有用。 我什至沒有在圖片上加黑條作為字幕。

在foundation.css中，我看到該類軌道標題的顯示設置為none

/* Captions ---------------------- */
.orbit-caption { display:none; font-family: inherit; }

.orbit-wrapper .orbit-caption { background: black; background: rgba(0, 0, 0, 0.6);  
    z-index: 30; color: white; text-align: center; padding: 7px 0; font-size: 13px;
    position: absolute; right: 0; bottom: 0; width: 100%; } 

通過刪除它，我能夠在圖片上看到一條黑色的小條（高約10像素），並且所有3個標題均已添加並從圖片中掉了出來。

圖片高度應小於400像素嗎？ 為此需要css修復嗎？
我究竟做錯了什么？

我嘗試只使用圖片標簽而不是錨標簽。 兩者都有相同的結果。

附言：我正在使用隨附的foundation.css。 我也不可以發布屏幕截圖...

抱歉發現了錯誤...我應該把data-caption =“＃captionOne” -Jody

Answer 1

在您的js中，“標題”設置為“真”嗎？

<script type="text/javascript">
   $(window).load(function() {
       $("#featured").orbit({
           captions : true
       });
   });
</script>

Answer 2

在圖像標簽中提供與SPAN標題標簽中相同的ID