如何在Foundation 5中將內容添加到Orbit滑塊的右上區域

Question

剛開始使用Foundation 5的這個Orbit好東西走了一步，我想在Orbit滑塊顯示的每個圖像的右側添加一些文本 （例如，在下面的代碼段中，我添加了一個小的無序列表以與幻燈片配合使用） 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>

這是在“軌道”滑塊中左對齊的圖像的屏幕截圖： 。

這是我的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滑塊添加到整個Foundation頁面：

http://wowslider.com/licenses.html