궤도가 표시되지 않음 - zurb 기초 V5

궤도가 표시되지 않음. 내가 뭘 잘못 했니? 참고 : 문서 구조가 변경되지 않았습니다. 머리에 버전 5궤도가 표시되지 않음 - zurb 기초 V5

코드 : 몸에

<script src="js/vendor/modernizr.js"></script>

코드 :

<div class="row"> 
<div class="orbit-container"> 
    <ul data-orbit class="example-orbit orbit-slides-container"> 
     <li> <img src="http://placehold.it/1000x300/A92B48/fff" alt="slide 1" /> 
      <div class="orbit-caption"> Caption One. </div> 
     </li> 
     <li class="active"> <img src="http://placehold.it/1000x300/EE964D/fff" alt="slide 2" /> 
      <div class="orbit-caption"> Caption Two. </div> 
     </li> 
     <li> <img src="http://placehold.it/1000x300/FDC43D/fff" alt="slide 3" /> 
      <div class="orbit-caption"> Caption Three. </div> 
     </li> 
    </ul> 
    <!-- Navigation Arrows --> <a href="#" class="orbit-prev">Prev <span></span></a> <a href="#" class="orbit-next">Next <span></span></a> <!-- Slide Numbers --> 
    <div class="orbit-slide-number"> <span>1</span> of <span>3</span> </div> 
    <!-- Timer and Play/Pause Button --> 
    <div class="orbit-timer"> <span></span> 
     <div class="orbit-progress"></div> 
    </div> 
</div> 
<!-- Bullets --> 
<ol class="orbit-bullets"> 
    <li data-orbit-slide-number="1"></li> 
    <li data-orbit-slide-number="2" class="active"></li> 
    <li data-orbit-slide-number="3"></li> 
</ol>

코드 닫기 body 전에 :

<script src="js/vendor/jquery.js"></script> 
<script src="js/foundation.min.js"></script> 
<script> 
     $(document).foundation({ 
    orbit: { 
    animation: 'slide', 
    timer_speed: 1000, 
    pause_on_hover: true, 
    animation_speed: 500, 
    navigation_arrows: true, 
    bullets: false 
    } 
}); 
    </script>

이 도와주세요! 어떤 몸이 간단한 작업 궤도 코드를 제공합니까? ----------------------- 업데이트 ----------- 나는 이것을 시도했다. 이 간단한 코드 .. 아무 일도 없었 음

<!doctype html> 
<html class="no-js" lang="en"> 
<head> 
<meta charset="utf-8" /> 
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> 
<title>Foundation | Welcome</title> 
<link rel="stylesheet" href="css/foundation.css" /> 
<script src="js/vendor/modernizr.js"></script> 
</head> 
<body> 
<div class="row"> 
    <ul class="example-orbit" data-orbit> 
     <li> <img src="../assets/img/examples/satelite-orbit.jpg" alt="slide 1" /> 
      <div class="orbit-caption"> Caption One. </div> 
     </li> 
     <li> <img src="../assets/img/examples/andromeda-orbit.jpg" alt="slide 2" /> 
      <div class="orbit-caption"> Caption Two. </div> 
     </li> 
     <li> <img src="../assets/img/examples/launch-orbit.jpg" alt="slide 3" /> 
      <div class="orbit-caption"> Caption Three. </div> 
     </li> 
    </ul> 
</div> 
<script src="js/vendor/jquery.js"></script> 
<script src="js/foundation.min.js"></script> 
<script> 
     $(document).foundation({ 
    orbit: { 
    animation: 'slide', 
    timer_speed: 1000, 
    pause_on_hover: true, 
    animation_speed: 500, 
    navigation_arrows: true, 
    bullets: false 
    } 
}); 
    </script> 
</body> 
</html>

출처

2014-02-11 Yamona

웹 브라우저의 콘솔에 스크립트 오류가 있습니까? –

번호. 또한 내가 여기에 파일을 업로드 http://goo.gl/s15195 – Yamona

나는이 간단한 코드를 시도 .. 아무 일도 없었어. – Yamona

나는 동일한 문제가있었습니다. 여기에 답변을 찾았습니다 : http://foundation.zurb.com/forum/posts/1635-orbit-inside-of-reveal-modal ...

CSS 파일에서 "orbit-container"클래스의 최소 높이를 지정하십시오.

.orbit-container { 
    min-height: 375px; 
    height:100%; 
}

비틀기

는 요소, 기본 배경 색상 (이미지로드 안) 또는 무엇이든 당신이 정말로 원하는 높이에 관해서, 사용자의 요구에 맞게.

EDIT 1 : div 태그에서 원하는 높이를 설정하면 궤도 슬라이더가 그 높이를 상속해야합니다.

다음과 같이 슬라이더를 설정했습니다. data-options 태그를 사용하여 "Advanced"헤더 아래에있는 this page의 옵션으로 슬라이더를 사용자 정의합니다. 바로 아래에있는 "현실 세계 예"헤더에서 구문을 사용 : 당신은 그냥 모든 기본 설정을 사용하려면 다음과 같이

<ul data-orbit data-options="pause_on_hover:false; 
          slide_number: false; 
          timer: false; 
          variable_height:true;"> 
    <li><img src="http://placesheen.com/725/500" alt="sheen1"></li> 
    <li><img src="http://placesheen.com/725/900" alt="sheen2"></li> 
    <li><img src="http://placesheen.com/725/500" alt="sheen3"></li> 
</ul>

, 당신은 데이터 옵션을 없애하고 설정할 수 있습니다 :

<ul data-orbit> 
    <li><img src="http://placesheen.com/725/500" alt="sheen1"></li> 
    <li><img src="http://placesheen.com/725/900" alt="sheen2"></li> 
    <li><img src="http://placesheen.com/725/500" alt="sheen3"></li> 
</ul>

희망이 있습니다.

출처

2014-02-17 07:34:28

궤도가 표시되지 않음 - zurb 기초 V5

답변

관련 문제