web-dev-qa-db-fra.com

Comment faire pour que Bootstrap Carousel s'adapte à 100% à l'écran?

Je me demandais comment insérer le carrousel dans Exemple du carrousel de Bootstrap pour s’adapter à 100% à l’écran, par opposition à son affichage actuel qui permet d’inclure des images circulaires vierges dans la page de destination principale lors de son chargement.

Voici une illustration simple de ce que je tente de faire fonctionner.

source de la page (bit pertinent):

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

carousel.css (bit pertinent):

/* 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 à accomplir est assez simple et j’avoue que j’ai essayé de bricoler avec le fichier carousel.css au cours des dernières heures (modification de la position de hauteur, de l’indice z, de la valeur, etc.), mais je peux Il semble que le redimensionnement ne fonctionne pas correctement. Plus spécifiquement, j'ai essayé d'ajouter

htmlcsstwitter-bootstrapcarousel
5
youngrrrr

Après avoir essayé de bricoler la version actuelle du carrousel fournie sur le site Web de Bootstrap, je me suis dit que tenter de trouver une solution de contournement pour le code fourni constituerait tout simplement plus de problèmes qu'il n'en valait la peine.

J'ai donc trouvé cet exemple à la place et je viens de remplacer le carrousel HTML par celui fourni par leur source - en commençant par "l'en-tête" et de remplacer la partie carrousel du carrousel.css par tout leur contenu. -slider.css partie .

Le code final ressemble à ceci:

HTML

<!-- Full Page Image Background Carousel Header -->
<header id="myCarousel" class="carousel slide">
    <!-- 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>

    <!-- Wrapper for Slides -->
    <div class="carousel-inner">
        <div class="item active">
            <!-- Set the first background image using inline CSS below. -->
            <div class="fill" style="background-image:url('http://placehold.it/1900x1080&text=Slide One');"></div>
            <div class="carousel-caption">
                <h2>Caption 1</h2>
            </div>
        </div>
        <div class="item">
            <!-- Set the second background image using inline CSS below. -->
            <div class="fill" style="background-image:url('http://placehold.it/1900x1080&text=Slide Two');"></div>
            <div class="carousel-caption">
                <h2>Caption 2</h2>
            </div>
        </div>
        <div class="item">
            <!-- Set the third background image using inline CSS below. -->
            <div class="fill" style="background-image:url('http://placehold.it/1900x1080&text=Slide Three');"></div>
            <div class="carousel-caption">
                <h2>Caption 3</h2>
            </div>
        </div>
    </div>

    <!-- Controls -->
    <a class="left carousel-control" href="#myCarousel" data-slide="prev">
        <span class="icon-prev"></span>
    </a>
    <a class="right carousel-control" href="#myCarousel" data-slide="next">
        <span class="icon-next"></span>
    </a>

</header>

CSS

/* CUSTOMIZE THE CAROUSEL
-------------------------------------------------- */
.carousel,
.item,
.active {
    height: 100%;
    margin-bottom: 60px;
}

.carousel-inner {
    height: 100%;
}

/* Background images are set within the HTML using inline CSS, not here */

.fill {
    width: 100%;
    height: 100%;
    background-position: center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
    -o-background-size: cover;
}

OMI, cette version est beaucoup plus facile à lire de toute façon. Merci à @ K.C. pour l'aide!

3
youngrrrr

Vous avez une hauteur fixe pour le carrousel et les articles du carrousel. Ensuite, ce sera évidemment de cette taille. 

Essaye ça

html,body{
   height:100%;
}
.carousel,.item,.active{
   height:100%;
 }
.carousel-inner{
    height:100%;
}

Regardez cette question pour la démo et plus.

Même après avoir changé, cela ne fonctionnera pas, vous pourrez alors remplacer votre carrousel par celui-ci DEMO

Aussi via jquery vous pouvez d’abord obtenir la hauteur totale de la fenêtre et l’adapter à la hauteur de l’encapsuleur de votre carrousel et des autres éléments correspondants.

$(document).ready(function(){
   var height = $(window).height();  //getting windows height
   jQuery('#myCarousel').css('height',height+'px');   //and setting height of carousel
});
7
Suman K.C

Un peu tard pour la fête ... mais plutôt tard alors jamais je suppose.

Quoi qu'il en soit, j'ai adopté une approche différente à cet égard. 

CSS:

html, body, .carousel,  .carousel-inner, .carousel-inner .item {
   height: 100%;
}

.Outside {
    background-image: url("../Your/Image/Path/Outside.jpg");
    z-index: -2;
    display: block;
    position: fixed;
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 50% 50%;
}

HTML:

<div id="carousel1" class="carousel carousel-fade" data-ride="carousel">

<!-- Indicators -->
  <ol class="carousel-indicators">
    <li data-target="#carousel1" data-slide-to="0" class="active"></li>
    <li data-target="#carousel1" data-slide-to="1"></li>
    <li data-target="#carousel1" data-slide-to="2"></li>
  </ol>

  <!-- Wrapper for slides -->
  <div class="carousel-inner" role="listbox">
    <div class="item active">
      <div class="Outside"></div>
      <div class="carousel-caption">
      </div>
    </div>
   </div>
</div>

J'espère que cela t'aides.

2
Chris

J'avais une exigence similaire et j'ai constaté que la classe ci-dessous bootstrap faisait à peu près l'affaire.

classe = "bloc d w-100 h-100"

<img src="static/images/carousel/img1.jpg" class="d-block w-100 h-100" >

:

0
Shubhav Chittal

Voici une solution facile qui a fonctionné pour moi.

Ajoutez cette classe à votre balise d'image à l'intérieur de carrousel-inner div.

CSS:

.carousel-img-width {
  width: 100%;
}

HTML:

<img src="img_url" alt="text" class="carousel-img-width">
0
Vigneshwaran Sivalingam