jquery - 如何制作全屏 BootStrap 轮播

Question

如何通过单击按钮强制引导轮播进入全屏模式？这是一个工作示例，这是我拥有的代码：

<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">‹&lt;/a>
        <a class="right carousel-control" href="#myCarousel" data-slide="next">›&lt;/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");

});