html - Scaling Bootstrap Carousel -
i working bootstrap (new it), trying create carousel takes 60% of page leaving space @ bottom having scale correctly when window shrunk down mobile size etc. right when window resized carousel gradually disappears disappears when window @ smallest size. here code:
<link rel="stylesheet" type="text/css" href="css/stylesheet.css"> <link rel="stylesheet" href="bootstrap/css/bootstrap.css"> <meta name="viewport" content="width=device-width, initial-scale=1"> </head> <body> <!--navigation bar--> <nav class="navbar navbar-inverse navbar-fixed-top"> <div class="container-fluid"> <div class="navbar-header"> <a class="navbar-brand">b media</a> </div> <ul class="nav navbar-nav"> <li><a href="#" class="active">home</a></li> <li><a href="#">history</a></li> <li><a href="#">technique</a></li> <li><a href="#">gallery</a></li> </ul> </div> </nav> <div class="container"> <div id="mycarousel" class="carousel slide" data-ride="carousel"> <ol class="carousel-indicators"> <li data-target="#mycarousel" data-slide-to="0" class="active"></li> <li data-target="#mycarousel" data-slide-to="1"></li> <li data-target="#mycarousel" data-slide-to="2"></li> <li data-target="#mycarousel" data-slide-to="3"></li> </ol> <!-- wrapper slides --> <div class="carousel-inner" role="listbox"> <div class="item active"> <img src="images/img1.jpg" alt="chania" class="carouselimages"> <div class="carousel-caption"> </div> </div> <div class="item"> <img src="images/img2.jpg" alt="flower" class="carouselimages"> <div class="carousel-caption"> </div> </div> <div class="item"> <img src="images/img3.jpg" alt="flower" class="carouselimages"> <div class="carousel-caption"> </div> </div> </div> </div> </div> any appreciated, if tell me why images load upside down in browser big help.
in css file write:
header.carousel { height: 60%; } it should work devices: mobile , desktop.
for space @ bottom of carousel write in css:
.carousel-inner { margin-bottom:50px; /*adjust accordingly*/ }
Comments
Post a Comment