Question

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

<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中，我看到类orbit-caption

的显示设置为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%; }

通过删除，我可以在图片上看到一个小黑条（大约10px高），并且3个字幕都被附加到图片中。

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

我尝试过只使用图片代码而不是锚标记。两者都有相同的结果。

P.S。我正在使用foundation.css，因为它随附下载。我不允许发布屏幕截图......

抱歉找到了错误...我本来应该把数据标题设为=“＃captionOne” -Jody

Answer 1

在你的js中，'captions'设置为'true'？

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

Answer 2

在图片代码中提供与SPAN字幕标记

相同的ID

轨道滑块：字幕问题

2 个答案: