반응 형 디자인의 기초 궤도 슬라이더

Question

zurb에서 Foundation 3을 사용했지만 슬라이더에 텍스트가 왼쪽에 있고 이미지가 오른쪽에 있습니다 (단지 이미지와 그 위에 레이블 대신) .

브라우저 창의 크기를 줄이면 슬라이더의 높이를 제외하고 모두 맞습니다.

우리가 필요로하는 것은 작은 브라우저에서 슬라이더를 높이는 것입니다 (다른 슬라이더가 아닌 동일한 슬라이더 여야 함).

유동체 슬라이더에 유체 옵션이 있으며 유체를 변경하면이 문제를 해결할 수있을 것으로 생각됩니다.

어떻게 달성 할 수 있습니까?

다음은 내 슬라이더 HTML 코드입니다 :

<div class="row"> 
    <div class="twelve columns"> 
    <div id="slider"> 
     <!-- *** This is the slider that needs to fit smaller browsers ***--> 
     <div class="row" style="background-color:White;"> 
      <div class="six columns"> 
       <h2>Title</h2> 
       <div class="summary"> 
        This is the summary is the summary is the summary is the summary is the summary is the summary is the summary. 
        <a href="javascript:void(0);">Learn more</a> 
       </div> 
       <div class="some-thumbnails"> 
        <img src="http://placehold.it/100x100&text=[thumbnail]" /> 
        <img src="http://placehold.it/100x100&text=[thumbnail]" /> 
        <img src="http://placehold.it/100x100&text=[thumbnail]" /> 
       </div> 
      </div> 
      <div class="six columns"> 
       <img src="http://placehold.it/550x250&text=[img 1]" /> 
      </div> 
     </div> 
     <img src="http://placehold.it/1000x400&text=[img 1]" /> 
    </div> 
</div> 

<hr /> 

Answer 1

궤도는 궤도 플러그인에서 사용되는 일부 플러그인에 의해 생성 된 이미지에 의해 제어됩니다. 내가 한 것은 가장 높은 슬라이드 (휴대 전화보기로 변경되었을 때)의 왼쪽과 오른쪽 부분의 높이를 얻고 "holder.js/[width] x [height]"로 data-src를 설정하도록 플러그인을 변경하는 것이 었습니다. Holder.run() 메서드를 호출합니다.