How to make a full screen BootStrap carousel

Question

How can I force bootstrap carousel into full screen mode by clicking on a button? Here is a working sample and this is the code which I have:

<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>

and the jQuery is:

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

and CSS:

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

This question has been asked a couple of times. Here is one solution: http://stackoverflow.com/questions/16350902/bootstrap-carousel-full-screen — Michael Freake, Jul 24 '13 at 21:17
Hi Michael, Thanks for reply , i already saw this post and i was trying to use the same code in my sample, but it is not working! — Mona Coder, Jul 24 '13 at 22:07
Would you like your images to stretch to fill the entire screen? Note that they may become distorted. — Michael Freake, Jul 24 '13 at 22:50

score 0 · Answer 1 · answered Jul 25 '13 at 01:23

I have used this for full size background images but I am sure it can be used for carousel too. See http://css-tricks.com/perfect-full-page-background-image/, Change the classes to suit your needs.

$(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");

});

How to make a full screen BootStrap carousel

1 Answers1