기초에서 궤도 슬라이더의 오른쪽 상단 영역에 내용을 추가하는 방법 5

Question

기초 5에서이 궤도를 사용하여 아기 단계를 수행하고 각 이미지의 오른쪽에 텍스트를 추가하려는 궤도 슬라이더로 노출 여기

<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> 

가 왼쪽 정렬 궤도 슬라이더 이미지의 스크린 샷입니다 : )하지만 결코 보여주지 않는다 - 예를 들어 아래의 코드에서, 나는 슬라이드 2와 함께 갈 작은 순서없는 목록을 추가 한 .

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

내가 너무 재단의 포럼에 게시하고 더 도움이 조언을 얻지 : 여기

내 app.css 파일의 단편이다. 나는 궤도 슬라이더를 포기하고 전체 기초 페이지에 와우 슬라이더를 추가했습니다.

http://wowslider.com/licenses.html