기초 4 : 궤도 슬라이더에있는 행을 사용하십시오.

Question

기초 4를 궤도 슬라이더와 함께 사용하고 있습니다. 콘텐츠 슬라이더로 사용하고 싶습니다.

궤도의 여백을 망가지지 않고 궤도 슬라이더에 기초의 행을 넣을 수 있습니까?

<ul data-orbit> 
     <div class="row"> 
      <div class="large-7 small-12 columns"> 
       <h1>Hallo</h1> 
      </div> 
     </div> 
     <div class="row"> 
      <div class="large-7 small-12 columns"> 
       <h1>Doei</h1> 
      </div> 
     </div> 
     <img src="img/slider/1.jpg">   
    </ul> 

세 가지 슬라이더 항목이 있습니다. 행 클래스와 2 개의 div 및 1 개의 전각 이미지. 이 예제에서는 클래스 행의 여백을 사용하지 않습니다. 행 클래스가있는 div가 중간에 정렬되도록 여백을 추가하려고합니다.

Answer 1

나는 당신의 질문을 잘 이해하고 있는지 모르겠다. 그러나 만약 당신이 3 개의 슬라이드 (대형 스크린 중간에 텍스트 2 개와 이미지 1 개)를 원한다면이 코드는 효과가 있다고 생각한다. 테스트) :

<li> 태그에 .large-centered 클래스를 추가하면 텍스트가 가운데로 자동 정렬되므로 CSS에서 여백을 신경 쓸 필요가 없습니다.

<div class="row"> 
    <div class="large-12 columns"> 
    <div class="orbit-container"> 
     <ul data-orbit=""> 
     <li class="row"> 
      <div class="large-7 large-centered small-12 columns"><h1>Hallo</h1></div> 
     </li> 
     <li class="row"> 
      <div class="large-7 large-centered small-12 columns"><h1>Doei</h1></div> 
     </li> 
     <li><img src="img/slider/1.jpg" alt=""></li>   
     </ul> 
    </div> 
    </div> 
</div>