2014-05-20 4 views
0

좋아, 여기서 문제가있는 것 같습니다. 나는 회전 목마를 작동시킬 수 없다. 모든 자바 스크립트 파일을로드하고 Google의 cdn 링크를 추가했는지 확인했습니다. 나는 또한 내가 올바르게 부름을 믿는다. 도움을 주시면 감사하겠습니다. 미리 감사드립니다!부트 스트랩이있는 회전 장치 3이 작동하지 않습니다.

<!DOCTYPE html> 
<html lang="en"> 

<head> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <meta name="description" content=""> 
    <meta name="author" content=""> 

    <title>Church of the Hills | Nashville TN</title> 

    <!-- Bootstrap core CSS --> 
    <link href="css/bootstrap.css" rel="stylesheet"> 

    <!-- Custom Google Web Font --> 
    <link href="font-awesome/css/font-awesome.min.css" rel="stylesheet"> 
    <link href='http://fonts.googleapis.com/css?family=Lato:100,300,400,700,900,100italic,300italic,400italic,700italic,900italic' rel='stylesheet' type='text/css'> 

    <!-- Add custom CSS here --> 
    <link href="css/landing-page.css" type="text/css" rel="stylesheet"> 


</head> 

<body> 

    <div class="dark-content-section"> 
     <!-- /.container --> 
     <div id="carousel-example-generic" class="carousel slide" data-ride="carousel"> 
      <!-- Indicators --> 
      <ol class="carousel-indicators"> 
      <li data-target="#carousel-example-generic" data-slide-to="0" class="active">  </li> 
      <li data-target="#carousel-example-generic" data-slide-to="1"></li> 
      <li data-target="#carousel-example-generic" data-slide-to="2"></li> 
      </ol> 

      <!-- Wrapper for slides --> 
      <div class="carousel-inner"> 
      <div class="item active"> 
       <img src="img/girls-slide.jpg" alt=""> 
       <div class="carousel-caption"> 
       ... 
       </div> 
       <img src="img/girls-slide.jpg" alt=""> 
       <div class="carousel-caption"> 
       ... 
       </div> 
      </div> 

      </div> 

      <!-- Controls --> 
      <a class="left carousel-control" href="#carousel-example-generic" data-slide="prev"> 
      <span class="glyphicon glyphicon-chevron-left"></span> 
      </a> 
      <a class="right carousel-control" href="#carousel-example-generic" data-slide="next"> 
      <span class="glyphicon glyphicon-chevron-right"></span> 
      </a> 
     </div> 

    </div> 
    <!-- /.dark-content-section --> 

    <!-- JavaScript --> 
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
    <script src="js/jquery-1.10.2.js"></script> 
    <script src="js/bootstrap.js"></script> 

    <script> 
     $(function(){ 
      $('#carousel-example-generic').carousel(); 
     }); 
    </script> 

</body> 

</html> 
+2

당신은 jQuery 라이브러리를 호출 두 번. 한 번만로드해야합니다. –

+0

모든 옵션 (http://jsbin.com/ragojiye/8/)으로 전체 회전식을 확인하고 사용 사례에 적합한 것을 사용하십시오. –

+0

한 번 부르더라도 작동하지 않습니다. 다른 하나가 제대로 로딩되지 않았을 경우를 대비하여 cdn 링크를 먼저 넣었습니다. – znels

답변

1

난 당신이 하나를 가지고 하나

<div class="item"> ... </div> 

이미지 당과 코드가 필요 믿고, 아직 3 리 지표로입니다 있습니다.

+0

그게 전부 야. 복사 및 붙여 넣기를하고 있었지만 충분히 멀리 가지 않았고 div 항목을 놓쳤습니다. 감사! – znels

0

이 시도 :

<!-- Wrapper for slides --> 
<div class="carousel-inner"> 
    <div class="item active"> 
     <img data-src="holder.js/900x500/auto/#777:#555/text:First slide" alt="First slide" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI5MDAiIGhlaWdodD0iNTAwIj48cmVjdCB3aWR0aD0iOTAwIiBoZWlnaHQ9IjUwMCIgZmlsbD0iIzc3NyI+PC9yZWN0Pjx0ZXh0IHRleHQtYW5jaG9yPSJtaWRkbGUiIHg9IjQ1MCIgeT0iMjUwIiBzdHlsZT0iZmlsbDojNTU1O2ZvbnQtd2VpZ2h0OmJvbGQ7Zm9udC1zaXplOjU2cHg7Zm9udC1mYW1pbHk6QXJpYWwsSGVsdmV0aWNhLHNhbnMtc2VyaWY7ZG9taW5hbnQtYmFzZWxpbmU6Y2VudHJhbCI+Rmlyc3Qgc2xpZGU8L3RleHQ+PC9zdmc+"> 
    </div> 
    <div class="item"> 
     <img data-src="holder.js/900x500/auto/#666:#444/text:Second slide" alt="Second slide" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI5MDAiIGhlaWdodD0iNTAwIj48cmVjdCB3aWR0aD0iOTAwIiBoZWlnaHQ9IjUwMCIgZmlsbD0iIzY2NiI+PC9yZWN0Pjx0ZXh0IHRleHQtYW5jaG9yPSJtaWRkbGUiIHg9IjQ1MCIgeT0iMjUwIiBzdHlsZT0iZmlsbDojNDQ0O2ZvbnQtd2VpZ2h0OmJvbGQ7Zm9udC1zaXplOjU2cHg7Zm9udC1mYW1pbHk6QXJpYWwsSGVsdmV0aWNhLHNhbnMtc2VyaWY7ZG9taW5hbnQtYmFzZWxpbmU6Y2VudHJhbCI+U2Vjb25kIHNsaWRlPC90ZXh0Pjwvc3ZnPg=="> 
    </div> 
    <div class="item"> 
     <img data-src="holder.js/900x500/auto/#555:#333/text:Third slide" alt="Third slide" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI5MDAiIGhlaWdodD0iNTAwIj48cmVjdCB3aWR0aD0iOTAwIiBoZWlnaHQ9IjUwMCIgZmlsbD0iIzU1NSI+PC9yZWN0Pjx0ZXh0IHRleHQtYW5jaG9yPSJtaWRkbGUiIHg9IjQ1MCIgeT0iMjUwIiBzdHlsZT0iZmlsbDojMzMzO2ZvbnQtd2VpZ2h0OmJvbGQ7Zm9udC1zaXplOjU2cHg7Zm9udC1mYW1pbHk6QXJpYWwsSGVsdmV0aWNhLHNhbnMtc2VyaWY7ZG9taW5hbnQtYmFzZWxpbmU6Y2VudHJhbCI+VGhpcmQgc2xpZGU8L3RleHQ+PC9zdmc+"> 
    </div> 
</div> 
관련 문제