Bootstrap Carousel Full Screen -
i trying image in bootstrap carousel show full screen haven't been able figure out, i've been working on awhile , totally stuck. right have 1 image, add more once works...
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>carousel template · bootstrap</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="description" content=""> <meta name="author" content=""> <!-- le styles --> <link href="../assets/css/bootstrap.css" rel="stylesheet"> <link href="../assets/css/bootstrap-responsive.css" rel="stylesheet"> <style> /* global styles -------------------------------------------------- */ /* padding below footer , lighter body text */ body { color: #5a5a5a; height: 100%; width: 100%; min-height: 100%; } /* customize navbar -------------------------------------------------- */ /* special class on .container surrounding .navbar, used positioning place. */ .navbar-wrapper { position: absolute; top: 0; left: 0; right: 0; z-index: 10; margin-top: 20px; } .navbar-wrapper .navbar { } /* remove border , change box shadow more contrast */ .navbar .navbar-inner { border: 0; -webkit-box-shadow: 0 2px 10px rgba(0,0,0,.25); -moz-box-shadow: 0 2px 10px rgba(0,0,0,.25); box-shadow: 0 2px 10px rgba(0,0,0,.25); } /* downsize brand/project name bit */ .navbar .brand { padding: 14px 20px 16px; /* increase vertical padding match navbar links */ font-size: 16px; font-weight: bold; text-shadow: 0 -1px 0 rgba(0,0,0,.5); } /* navbar links: increase padding taller navbar */ .navbar .nav > li > { padding: 15px 20px; } /* offset responsive button proper vertical alignment */ .navbar .btn-navbar { margin-top: 10px; } /* customize carousel -------------------------------------------------- */ /* carousel base class */ .carousel { margin-bottom: 0px; } .carousel .container { position: relative; z-index: 9; } .carousel .item { height: 100%; } .carousel-inner { overflow:hidden; width: 100%; min-height: 100%; position:relative; } .carousel img { position: absolute; top: 0; left: 0; min-width: 100%; min-height: 100%; } .carousel-caption { background-color: transparent; position: static; max-width: 550px; padding: 0 20px; margin-top: 200px; } .carousel-caption h1, .carousel-caption .lead { margin: 0; line-height: 1.25; color: #fff; text-shadow: 0 1px 1px rgba(0,0,0,.4); } .carousel-caption .btn { margin-top: 10px; } /* responsive css -------------------------------------------------- */ @media (max-width: 979px) { .container.navbar-wrapper { margin-bottom: 0; width: auto; } .navbar-inner { border-radius: 0; margin: -20px 0; } .carousel img { width: auto; height: 500px; } .featurette { height: auto; padding: 0; } .featurette-image.pull-left, .featurette-image.pull-right { display: block; float: none; max-width: 40%; margin: 0 auto 20px; } } @media (max-width: 767px) { .navbar-inner { margin: -20px; } .carousel { margin-left: -20px; margin-right: -20px; } .carousel img { height: 300px; } .carousel-caption { width: 65%; padding: 0 70px; margin-top: 100px; } .carousel-caption h1 { font-size: 30px; } .carousel-caption .lead, .carousel-caption .btn { font-size: 18px; } .marketing .span4 + .span4 { margin-top: 40px; } .featurette-heading { font-size: 30px; } .featurette .lead { font-size: 18px; line-height: 1.5; } } </style> <!-- html5 shim, ie6-8 support of html5 elements --> <!--[if lt ie 9]> <script src="../assets/js/html5shiv.js"></script> <![endif]--> <!-- fav , touch icons --> <link rel="apple-touch-icon-precomposed" sizes="144x144" href="../assets/ico/apple-touch-icon-144-precomposed.png"> <link rel="apple-touch-icon-precomposed" sizes="114x114" href="../assets/ico/apple-touch-icon-114-precomposed.png"> <link rel="apple-touch-icon-precomposed" sizes="72x72" href="../assets/ico/apple-touch-icon-72-precomposed.png"> <link rel="apple-touch-icon-precomposed" href="../assets/ico/apple-touch-icon-57-precomposed.png"> <link rel="shortcut icon" href="../assets/ico/favicon.png"> </head> <body> <!-- navbar ================================================== --> <div class="navbar-wrapper"> <!-- wrap .navbar in .container center within absolutely positioned parent. --> <div class="container"> <div class="navbar navbar-inverse"> <div class="navbar-inner"> <!-- responsive navbar part 1: button triggering responsive navbar (not covered in tutorial). include responsive css utilize. --> <button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="brand" href="#">treyca</a> <!-- responsive navbar part 2: place navbar contents want collapsed withing .navbar-collapse.collapse. --> <div class="nav-collapse collapse"> <ul class="nav"> <li class="active"><a href="#">home</a></li> <li><a href="#about">about</a></li> <li><a href="fluid.html">beta</a></li> <li><a href="#contact">contact</a></li> <!-- read bootstrap dropdowns @ http://twitter.github.com/bootstrap/javascript.html#dropdowns --> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">dropdown <b class="caret"></b></a> <ul class="dropdown-menu"> <li><a href="#">action</a></li> <li><a href="#">another action</a></li> <li><a href="#">something else here</a></li> <li class="divider"></li> <li class="nav-header">nav header</li> <li><a href="#">separated link</a></li> <li><a href="#">one more separated link</a></li> </ul> </li> </ul> </div><!--/.nav-collapse --> </div><!-- /.navbar-inner --> </div><!-- /.navbar --> </div> <!-- /.container --> </div><!-- /.navbar-wrapper --> <!-- carousel ================================================== --> <div id="mycarousel" class="carousel slide"> <div class="carousel-inner"> <div class="item active"> <img src="../assets/img/examples/bar-1.jpg" alt=""> <div class="container"> <div class="carousel-caption"> <h1>example headline.</h1> <p class="lead">cras justo odio, dapibus ac facilisis in, egestas eget quam. donec id elit non mi porta gravida @ eget metus. nullam id dolor id nibh ultricies vehicula ut id elit.</p> <a class="btn btn-large btn-primary" href="#">sign today</a> </div> </div> </div> </div> <!-- footer --> <footer> <p>© 2013 company, inc. · <a href="#">privacy</a> · <a href="#">terms</a></p> </footer> </div><!-- /.carousel --> <!-- le javascript ================================================== --> <!-- placed @ end of document pages load faster --> <script src="../assets/js/jquery.js"></script> <script src="../assets/js/bootstrap-transition.js"></script> <script src="../assets/js/bootstrap-alert.js"></script> <script src="../assets/js/bootstrap-modal.js"></script> <script src="../assets/js/bootstrap-dropdown.js"></script> <script src="../assets/js/bootstrap-scrollspy.js"></script> <script src="../assets/js/bootstrap-tab.js"></script> <script src="../assets/js/bootstrap-tooltip.js"></script> <script src="../assets/js/bootstrap-popover.js"></script> <script src="../assets/js/bootstrap-button.js"></script> <script src="../assets/js/bootstrap-collapse.js"></script> <script src="../assets/js/bootstrap-carousel.js"></script> <script src="../assets/js/bootstrap-typeahead.js"></script> <script> !function ($) { $(function(){ // carousel demo $('#mycarousel').carousel() }) }(window.jquery) </script> <script src="../assets/js/holder/holder.js"></script> <style> body { background-color: black; color: #ffffff; } </style> </body> </html>
make sure img inside carousel item set height , width 100%. have make sure carousel , of .item containers (html,body) 100%...
html,body{height:100%;} .carousel,.item,.active{height:100%;} .carousel-inner{height:100%;} boostrap full screen carousel demo
here's example bootstrap 3.x: http://www.codeply.com/go/2tvxo3matv
Comments
Post a Comment