Zurb Foundation 4.3.0 궤도에 슬라이드가 표시되지 않습니다.

Question

프로젝트에 Foundation 4.3.0을 사용하고 있으며 가장 기본적인 방법으로 궤도를 설정하려고합니다. javascript와 CSS가 올바르게로드되고있는 것처럼 보이고, 이미지가로드되고, 모든 추가 요소가 삽입됩니다. 그러나 기본 <ul>의 높이는 항상 0px입니다.

<div class="row"> 
    <section class="large-12 columns"> 
     <div class="slideshow-wrapper"> 
      <div class="preloader"></div> 
      <ul data-orbit=""> 
       <li><img src="/media/cache/8a/ec/8aec9d6a99dea3db235f24712e8f3f88.jpg"></li> 
       <li><img src="/media/cache/20/88/208812a64eee2e7e9b8efe4b5f73c990.jpg"></li> 
      </ul> 
     </div> 
    </section> 
</div> 

여기에 HTML이 가지 않습니다 foundation.orbit.js 번입니다 : 여기 내 HTML의 HTML을 생성 할 때 나는 이미지에 명시적인 폭 + 높이를 넣어 시도

<div class="row"> 
    <section class="large-12 columns"> 
     <div class="slideshow-wrapper"> 
      <div class="preloader"></div> 
      <div class="orbit-container orbit-stack-on-small"> 
       <ul data-orbit="" class="orbit-slides-container" style="margin-left: -100%; width: 400%; height: 0px;"> 
        <li data-orbit-slide="" style="width: 25%;"><img src="/media/cache/20/88/208812a64eee2e7e9b8efe4b5f73c990.jpg"></li> 
        <li class="active" style="width: 25%;"><img src="/media/cache/8a/ec/8aec9d6a99dea3db235f24712e8f3f88.jpg"></li> 
        <li style="width: 25%;"><img src="/media/cache/20/88/208812a64eee2e7e9b8efe4b5f73c990.jpg"></li> 
        <li data-orbit-slide="" style="width: 25%;"><img src="/media/cache/8a/ec/8aec9d6a99dea3db235f24712e8f3f88.jpg"></li> 
       </ul> 

       <a href="#" class="orbit-prev">Prev <span></span></a> 
       <a href="#" class="orbit-next">Next <span></span></a> 

       <div class="orbit-slide-number"> 
        <span>1</span> of <span>2</span> 
       </div> 

       <div class="orbit-timer"> 
        <span></span> 
        <div class="orbit-progress" style="overflow: hidden; width: 54.15%;"></div> 
       </div> 
      </div> 

      <ol class="orbit-bullets"> 
       <li data-orbit-slide-number="1" class="active"></li> 
       <li data-orbit-slide-number="2" class=""></li> 
      </ol> 
     </div> 
    </section> 
</div> 

이, 하나의 슬라이드에 class="active"을 넣어은, 다양한 재단 설정 변경, 등등 아무것도 작동하는 것 같습니다.

HTML을 Foundation 문서의 실제 예제와 비교하면 작업중인 버전에서 슬라이드에 항상 z-index이 동적으로 설정된다는 것을 알게되었습니다. 내 사이트에서는 z-index이 설정되지 않습니다. 물론 작업 버전의 ul에는 슬라이드의 높이와 동일한 인라인 CSS 높이가 있습니다.

ul 높이를 수동으로 300px로 설정하면 이미지가 보이지 않는 것을 제외하면 모든 것이 올바르게 보입니다. div.orbit-container을 overflow: visible으로 설정하면 컨테이너 왼쪽에 슬라이드 중 하나의 가장자리가 표시됩니다.

어떤 아이디어라도 높이 평가할 수 있습니다.

Answer 1

나는 지나치게 자세한 정보를 피하려고 노력할 것이다. 그러나 이것은 내가 발견 한 것이며, 이 문제를 해결 한 코드는 다음과 같습니다.

로컬 환경과 사이트의 개발 환경을 가지고 있기 때문에이 파일을 발견했습니다. 로컬 환경은 훌륭하게 작동했지만 프로덕션 환경에는 위에서 언급 한 모든 문제가있었습니다.

물론 첫 번째 문제는 높이를 0px로 설정 한 생성 된 컨테이너 div입니다. 이것은 충분히 이상합니다. 나는 css의 컨테이너에 수동으로 높이를 추가했다. 모든 이미지가 숨어있는 이유는 100 % 또는 약간 큰 왼쪽 여백이며 절대적으로 모두 위치한다는 것입니다. 코드 차이가 존재하는 이유에 대해 더 많은 도움이 되었으면합니다. 더 자세히 조사 할 시간은 있지만 지금은 더 많이 조사 할 것입니다.

어쨌든, 다음은 수정했다 :

.orbit-container { height:250px; } 

.orbit-container .orbit-slides-container > * { 
    position: relative; 
    margin-left: 0; 
    float: left; 
    height: 100%; 
} 

Answer 2

이미지 URL은 괜찮습니까? 나는 3 개의 이미지 중 2 개와 같은 문제가 있었지만 문제는 URL에 있었다.

Answer 3

저도 같은 문제가 있었고, 난 그냥 발견 한 그 foundation.min.css 개별 모듈을 사용하여 (I 나침반을 사용하고 있습니다) 대신 사용 문제를 해결하고, foundation.css (minyfied가 아닌)를 사용하려고 했습니까?

Answer 4

.orbit-container { height:auto; } 

.orbit-container .orbit-slides-container > * { 
    position: relative; 
    margin-left: 0; 
    float: left; 
    height: 100%; 
} 

이전 솔루션에서 약간의 업그레이드. 이 수정을 통해 휴대 전화와 데스크톱에서 슬라이드 쇼를보다 쉽게 ​​표시 할 수 있습니다.