Как сделать полноэкранный карусель BootStrap

Question

Как заставить загрузочную карусель в полноэкранном режиме, нажав на кнопку? Here это рабочий образец, и это код, который у меня есть:

<div class="container"> 
<div class="well span9 columns"> 
    <div id="myCarousel" class="carousel slide"> 
     <div class="carousel-inner"> 
      <div class="item active"> 
       <img src="http://bootstrapdocs.com/v2.0.3/docs/assets/img/bootstrap-mdo-sfmoma-01.jpg" alt="" /> 
      </div> 
      <div class="item"> 
       <img src="http://bootstrapdocs.com/v2.0.3/docs/assets/img/bootstrap-mdo-sfmoma-02.jpg" alt="" /> 
      </div> 
      <div class="item"> 
       <img src="http://bootstrapdocs.com/v2.0.3/docs/assets/img/bootstrap-mdo-sfmoma-03.jpg" alt="" /> 
      </div> 
     </div> 
     <a class="left carousel-control" href="#myCarousel" data-slide="prev">‹</a> 
     <a class="right carousel-control" href="#myCarousel" data-slide="next">›</a> 
    </div> 
     <button type="button" class="btn btn-inverse fulesize"><i class="icon-fullscreen icon-white"></i></button> 
</div> 
</div> 

и JQuery является:

$(".fulesize").click(function(){ 
    $(".carousel-inner, .carousel, .item, .active ").addClass("full"); 
}); 

и CSS:

html{height:100%;} 
.full{height:100%;} 

Answer 1

Я использовал это для полного размера но я уверен, что он может использоваться и для карусели. См. http://css-tricks.com/perfect-full-page-background-image/. Измените классы в соответствии с вашими потребностями.

$(window).load(function() {  

    var theWindow  = $(window), 
     $bg    = $("#bg"), 
     aspectRatio  = $bg.width()/$bg.height(); 

    function resizeBg() { 

     if ((theWindow.width()/theWindow.height()) < aspectRatio) { 
      $bg 
       .removeClass() 
       .addClass('bgheight'); 
     } else { 
      $bg 
       .removeClass() 
       .addClass('bgwidth'); 
     } 

    } 

    theWindow.resize(resizeBg).trigger("resize"); 

});