는 부트 스트랩 - carousel.js

다음 HTM을 볼 시도하여 실패,하지만 난는 부트 스트랩 - carousel.js

http://twitter.github.com/bootstrap/javascript.html에서와 동일한 결과를 얻을하지 않습니다 - 회전 목마

JS/Default.js :

$(function() { 
    // $('.carousel').carousel({ interval: 2000 }) 

     $('#myCarousel').carousel() 
      });

태그 :

<head> 
     <link href="Resources/Styles/bootstrap.css" rel="stylesheet" type="text/css" /> 
     <title></title> 
    </head> 

    <body> 
     <h2>Example carousel</h2> 
     <p>Watch the slideshow below.</p> 
     <div id="myCarousel" class="carousel slide"> 
      <div class="carousel-inner"> 
       <div class="item active"> 
        <img src="Images/Browser/add.JPG" /> 
        <div class="carousel-caption"> 
         <h4>First Thumbnail label</h4> 
         <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id 
          elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies 
          vehicula ut id elit.</p> 
        </div> 
       </div> 
       <div class="item"> 
        <img src="Images/Browser/delete.JPG" /> 
        <div class="carousel-caption"> 
         <h4>Second Thumbnail label</h4> 
         <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id 
          elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies 
          vehicula ut id elit.</p> 
        </div> 
       </div> 
       <div class="item"> 
        <img src="Images/Browser/rename.JPG" /> 
        <div class="carousel-caption"> 
         <h4>Third Thumbnail label</h4> 
         <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id 
          elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies 
          vehicula ut id elit.</p> 
        </div> 
       </div> 
      </div> 
      <!-- Carousel nav --> 
      <a class="carousel-control left" href="#myCarousel" data-slide="prev">&lsaquo;</a> 
      <a class="carousel-control right" href="#myCarousel" data-slide="next">&rsaquo;</a> 
     </div> 
     <script src="Resources/Scripts/jquery-1.7.1.min.js" type="text/javascript"></script> 
     <script type="text/javascript" src="js/Common.js"></script> 
     <script type="text/javascript" src="Resources/Scripts/bootstrap-carousel.js"></script> 
     <script src="js/Default.js" type="text/javascript"></script> 
    </body> 

</html>

출처

2012-02-10 Elad Benda

는 회전 목마 플러그인에 대한 요구 사항과 일치처럼 외모를 붙여 넣은 HTML :

는 다음과 같은 자바 스크립트 파일을 포함합니다. 내가보기에는 그다지 문제가되지 않을 것입니다 : 기본 bootstrap.js와 bootstrap-carousel.js 파일 인 jquery를 포함시켜야합니다. – dsummersl

그들은 모두 수입의 하단 –

당신이 데모에서와 같은 결과를 얻지 않는다고 말할 때, 당신은 무엇을 얻습니까? 뭔가 다른 점이나 오류가 있습니까? 아마도 회전 목마 대신 전체 bootstrap.js 파일을 포함 시키려고합니까? – periklis

위의 주석에서 언급했듯이 부트 스트랩을위한 슬라이드 쇼 UI에 대한 재 형식화가없는 서식없는 목록을보고있는 경우 부트 스트랩 CSS 파일 (아마도 URL이 잘못되었을 수 있음)을 참조하지 않는 것일 수 있습니다. 브라우저의 'Web Inspector'또는 'Developer Tools'를 사용하여 포함하고있는 JS 및 CSS 파일이 실제로 발견되는지 확인하십시오 (그렇지 않은 경우 빨간색 텍스트가 표시됩니다!).

example implementation

회전 목마 작업을 진행하는 데 필요한 기본 단계

는 다음과 같습니다 :

당신은 내가 원래 텍스트를 사용하여 jsfiddle 예를 작업 minimimal을 만든이 기능을 구현할 수 있도록 지원

carousel, carousel-inner 및 item 클래스 (정확히 했음)로 html을 올바르게 포맷하십시오.
bootstrap.css 파일을 포함하십시오. JQuery와, 부트 스트랩 전이, 부트 스트랩 회전 목마

출처

2012-02-10 15:25:07 dsummersl

회색 자막 + 사진이 중간 크기 (모든 화면이 아닌) 및 가운데에 정렬되도록하려면 어떻게해야합니까?내가 proprer 높이와 너비와 div 안에 넣으려고 -하지만 그것은 여전히 화면 너비 모두의 –

나는 여기에 예제처럼 http://twitter.github.com/bootstrap/javascript.html (회전 목마 아래에) 표시 싶어요 –

첫 번째 추측은 부트 스트랩 spanX 클래스를 사용해야한다는 것입니다.하지만 정확히 무엇을 할 것인지 확신 할 수 없습니다. jsfiddle을 수정하고 나에게 링크를 보내 주시면 내가하는 일에 대해 더 잘 알고 계실까요? – dsummersl

는 부트 스트랩 - carousel.js

답변

관련 문제