如何在Foundation 5中的Orbit滑块的右上区域添加内容

Question

刚刚从基金会5开始使用Orbit这个Orbit礼物，我很想想要在每个图像的右侧添加一些文字由Orbit滑块曝光（例如，在下面的代码片段中，我＆＃ 39;我添加了一个小的无序列表与幻灯片2一起 - 但它从未显示过：

<div class="row myContainer">
    <div class="small-12 medium-12 large-12 columns mySlides">
        <ul class="example-orbit" data-options="timer_speed: 5000;animation_speed:500;" data-orbit >
          <li>
            <img id="myLogo" src="img/TCBlogo-development-small.JPG" alt="slide 0" />
            <div class="orbit-caption id="logoCaption">
              A "reminder" web application based on group roles or positions
            </div>
          </li>
          <li>
            <img src="http://lorempixel.com/600/400/business/1" alt="slide 1" />
              <ul>
                  <li>keep track of important events, tasks, and deadlines</li>
                  <li>allows you to maintain operational continuity regardless of employee turnover</li>
              </ul>
            <div class="orbit-caption">
              Helps you and your employees get more organized and stay on top of your business
            </div>
          </li>
          <li>
            <img src="http://lorempixel.com/600/400/business/2" alt="slide 2" />
            <div class="orbit-caption">
               Keeps track of important events, tasks, and deadlines within your company
            </div>
          </li>
          <li>
            <img src="http://lorempixel.com/600/400/business/3" alt="slide 3" />
            <div class="orbit-caption">
              Gives managers the tools they need to verify that employees are completing their tasks responsibly and on time
            </div>
          </li>
          <li>
            <img src="http://lorempixel.com/600/400/business/4" alt="slide 4 />
            <div class="orbit-caption">
              Cloud-based solution that does not forget - reminding with email or text alerts
            </div>
          </li>
        </ul>
    </div>
</div>

<script src="js/vendor/jquery.js"></script>
<script src="js/foundation.min.js"></script>
<script src="js/foundation.orbit.js"></script>
<script>
  $(document).foundation();
</script>
</body>
</html>

以下是Orbit滑块中左对齐图像的屏幕截图：。

以下是我的app.css文件的摘录：

body { 
background-color: teal;
}
.myContainer {
background-color: white;
width:100%;
margin-bottom: 1%;
 }
.myContainer img{
  max-width:100%;
}
.myFiller{
    background-color: silver;
}

#myLogo {
    width:70%;
    height:60%;
    /*border: 0 0 0 0;*/
    margin-bottom: 10%;
}
#logoCaption {
    margin-top: 10%;
    padding-top: 10%;
}
.mySlides{
    padding: 2%;
    /*border: 1px solid black;*/
    width: 100%;
}
.myCaption{
    margin-top: 5%;
    /*border: 1px solid black;*/
    width: 60%;
}

Answer 1

我也在基金会的论坛上发布了这个，并没有得到任何有用的建议。我最终放弃了Orbit滑块并将Wow Slider添加到整个Foundation页面：

http://wowslider.com/licenses.html