Zurb 궤도는 : 이미지를 통해 텍스트를 추가

Question

나는 제목 및 설명 foreach는 슬라이드, 같은 것을 추가 할 것 : 나는 "자막"을 시도했습니다

<!-- Header --> 
    <div id="featured"> 
     <img src="http://cf2.imgobject.com/t/p/w780/fI3ucpgaVKOUcQ82vhgWmWuLlg2.jpg"> 
     <img src="http://cf2.imgobject.com/t/p/w780/dAc3Ob868XGnAX8uOptb7HWx0In.jpg"> 
     <img src="http://cf2.imgobject.com/t/p/w780/2fwHVLvh6kdwCujsMwtNmwRJAf1.jpg"> 
    </div> 

<script type="text/javascript"> 
    $(window).load(function() { 

     $('#featured').orbit(); 
    }); 
    </script> 

을하지만, 난 몰라 같은 효과를 얻는다. 내가 어떻게 할 수 있니?

Zurb Fondation Orbit

Answer 1

내가 지금 재단과 함께하고 있어요 그래서 내가 당신을 도와하려고합니다. 당신의 의견이 도움이되기 전에 내가 이것을 한 적이 없기 때문에. 당신의 App.js 최초

는 유체 궤도이 줄을 추가 :

$('#featuredContent').orbit({ fluid: '800x800' }); 

는 800x800

이 궤도 슬라이더 너비와 높이입니다.

그런 다음 App.css에이를 추가 :

: 당신의 .js 파일에 #featuredContent에 referes 우리는 우리의 HTML 코드에서 사용하는 .back 클래스를 추가

#featuredContent .back { 
    position: absolute; 
    top: 0; 
    left: 0; 
    z-index: -1; 
} 

<div id="featuredContent"> 
    <div> 
    <h4>This is a content slider.</h4> 
    <p>Each slide holds arbitrary content, like text or actions.</p> 
    <img class="back" src="/images/test.jpg" /> 
    </div> 
    <div> 
    <h4>We can include text and buttons, like this!</h4> 
    <p>We take no responsibility for what happens if you click this button.</p> 
    <p><a href="http://www.youtube.com/watch?v=dQw4w9WgXcQ" class="button" target="_blank">Rock My World!</a></p> 
    <img class="back" src="/images/test.jpg" /> 
    </div> 
    <div> 
    <h4>We can include text and buttons, like this!</h4> 
    <p>We take no responsibility for what happens if you click this button.</p> 
    <p><a href="http://www.youtube.com/watch?v=dQw4w9WgXcQ" class="button" target="_blank">Rock My World!</a></p> 
    <img class="back" src="/images/test.jpg" /> 
    </div> 
</div> 

나는 트릭을해야하고 그 아래에 제목 (H4)과 설명 (P)이있는 그림이 있어야한다고 생각합니다.

#featuredContent p { 
} 

및

#featuredContent h4 { 
} 

을 : 당신은 또한 사용하여 CSS의 제목과 설명의 위치를 ​​사용자 정의 할 수 있습니다