Comment obtenir Bootstrap Carrousel pour s'adapter à 100% à l'écran?
Je me demandais comment faire pour obtenir le carrousel dans Bootstrap Carrousel exemple pour s'adapter à 100% à l'écran, par opposition à la façon dont c'est l'affichage qui permet à certains vide circulaire images à inclure dans la principale page d'atterrissage quand il est chargé.
Voici une illustration simple de ce que je suis en train d'essayer de se mettre au travail.
source de la page (bits):
<!-- Carousel
================================================== -->
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<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>
</ol>
<div class="carousel-inner" role="listbox">
<div class="item active">
<img class="first-slide" src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" alt="First slide">
<div class="container">
<div class="carousel-caption">
<h1>Example headline.</h1>
<p>Note: If you're viewing this page via a <code>file://</code> URL, the "next" and "previous" Glyphicon buttons on the left and right might not load/display properly due to web browser security rules.</p>
<p><a class="btn btn-lg btn-primary" href="#" role="button">Sign up today</a></p>
</div>
</div>
</div>
<div class="item">
<img class="second-slide" src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" alt="Second slide">
<div class="container">
<div class="carousel-caption">
<h1>Another example headline.</h1>
<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
<p><a class="btn btn-lg btn-primary" href="#" role="button">Learn more</a></p>
</div>
</div>
</div>
<div class="item">
<img class="third-slide" src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" alt="Third slide">
<div class="container">
<div class="carousel-caption">
<h1>One more for good measure.</h1>
<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
<p><a class="btn btn-lg btn-primary" href="#" role="button">Browse gallery</a></p>
</div>
</div>
</div>
</div>
<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div><!-- /.carousel -->
carrousel.css (bits):
/* CUSTOMIZE THE CAROUSEL
-------------------------------------------------- */
/* Carousel base class */
.carousel {
height: 500px;
margin-bottom: 60px;
}
/* Since positioning the image, we need to help out the caption */
.carousel-caption {
z-index: 10;
}
/* Declare heights because of positioning of img element */
.carousel .item {
height: 500px;
background-color: #777;
}
.carousel-inner > .item > img {
position: absolute;
top: 0;
left: 0;
min-width: 100%;
height: 500px;
}
Je sais que la tâche est assez simple, et j'avoue que j'ai essayé de bricoler avec le manège.fichier css pour la dernière heure (modification de diverses position de la hauteur, z-index, etc. les valeurs), mais j'ai juste ne peut pas sembler obtenir le redimensionnement de travailler sans majorly bousiller les choses. Plus précisément, j'ai essayé d'ajouter
OriginalL'auteur youngrrrr | 2015-06-19
Vous devez vous connecter pour publier un commentaire.
Vous avez à hauteur fixe pour le carrousel et le carrousel des éléments. Ensuite, il sera évidemment de la taille.
Essayer cette
Regardez cette question pour la démo et plus.
Même après le changement, ça ne marchera pas, alors vous pouvez remplacer votre carrousel avec celui-là
DÉMO
Aussi via jquery vous pouvez d'abord obtenir la version windows de hauteur totale et la hauteur de votre carrousel emballage et d'autres éléments en conséquence.
J'ai fini par le remplacement de mon code, de toute façon, mais il a utilisé l'exemple ici: github.com/IronSummitMedia/startbootstrap-full-slider. Merci à vous pour l'aider à bien!
OriginalL'auteur Suman K.C
Après avoir essayé de jouer avec la version actuelle de carrousel fournis sur Bootstrap du site, je viens de comprendre que le fait d'essayer de trouver un travail autour de leur code fourni serait juste plus d'ennuis que cela vaut la peine.
Donc, j'ai trouvé cet exemple au lieu et juste remplacé le carrousel HTML avec celui fourni par leur source de départ à la 'tête' et a remplacé le carrousel partie dans le carrousel.css avec leur plein curseur.css partie.
Code Final ressemble à quelque chose comme ceci:
HTML
CSS
De l'OMI, cette version est beaucoup plus facile à lire de toute façon. Grâce à @K. C. pour l'aide!
OriginalL'auteur youngrrrr
Un peu en retard à la fête... mais un peu tard alors jamais, je suppose.
De toute façon, j'ai pris une approche différente pour cette.
CSS:
HTML:
Espère que cette aide.
OriginalL'auteur Chris
Voici une solution simple qui a fonctionné pour moi.
Ajouter cette classe à votre image balise à l'intérieur de carrousel-intérieure div.
CSS:
HTML:
OriginalL'auteur Vigneshwaran Sivalingam