Carsoul Simple

by Behseini

HTML

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

CSS

@import url('http://twitter.github.com/bootstrap/assets/css/bootstrap.css');
 @import url('http://twitter.github.com/bootstrap/assets/css/bootstrap-responsive.css');
 .container {
    margin-top: 10px;
}
html{height:100%;}
.full{height:100%;}

JavaScript

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