轨道滑块:标题问题

Question

我是响应式设计的新手。我正在尝试为我的项目使用基金会轨道滑块。我无法显示图片的标题。我有以下代码...

<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中查找并尝试指挥官恶魔给出的修复。还是没用。我什至没有得到图片上的深色条带标题。

在基础中.css我看到类轨道标题的显示设置为无

/* 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%; } 

通过删除它，我能够在图片上看到一条小的黑色条带（大约 10px 高），并且 3 个标题都附加并掉出图片。

图片的高度应该小于 400 像素吗？这是否需要 css 修复？
我做错了什么？

我尝试仅使用图像标签而不是锚标签。两者的结果相同。

附言我正在使用基础.css因为它附带下载。我也不能发布屏幕截图...

抱歉发现了错误...我应该把data-caption="#captionOne"-乔迪

Answer 1

在你的js中，"captions"是否设置为"true"？

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

Answer 2

在图像标记中提供与 SPAN 标题标记中相同的 ID