web-dev-qa-db-fra.com

Bootstrap Carousel Full Screen

J'essaie de faire apparaître l'image dans le carrousel de bootstrap en plein écran, mais je n'ai pas été capable de le comprendre. Je travaille dessus depuis un certain temps et je suis totalement coincé. Pour le moment, je n'ai qu'une image, mais j'en ajouterai d'autres quand cela fonctionnera ...

<!DOCTYPE html>

<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Carousel Template &middot; 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 the footer and lighter body text */

    body {
      color: #5a5a5a;
      height: 100%;
      width: 100%;
      min-height: 100%;
    }



    /* CUSTOMIZE THE NAVBAR
    -------------------------------------------------- */

    /* Special class on .container surrounding .navbar, used for positioning it into place. */
    .navbar-wrapper {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      z-index: 10;
      margin-top: 20px;
    }
    .navbar-wrapper .navbar {

    }

    /* Remove border and change up box shadow for 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 the brand/project name a bit */
    .navbar .brand {
      padding: 14px 20px 16px; /* Increase vertical padding to match navbar links */
      font-size: 16px;
      font-weight: bold;
      text-shadow: 0 -1px 0 rgba(0,0,0,.5);
    }

    /* Navbar links: increase padding for taller navbar */
    .navbar .nav > li > a {
      padding: 15px 20px;
    }

    /* Offset the responsive button for proper vertical alignment */
    .navbar .btn-navbar {
      margin-top: 10px;
    }



    /* CUSTOMIZE THE 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, for IE6-8 support of HTML5 elements -->
    <!--[if lt IE 9]>
      <script src="../assets/js/html5shiv.js"></script>
    <![endif]-->

    <!-- Fav and 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 the .navbar in .container to center it within the absolutely positioned parent. -->
      <div class="container">

        <div class="navbar navbar-inverse">
          <div class="navbar-inner">
            <!-- Responsive Navbar Part 1: Button for triggering responsive navbar (not covered in tutorial). Include responsive CSS to 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 all navbar contents you 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 about Bootstrap dropdowns at 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 at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
              <a class="btn btn-large btn-primary" href="#">Sign up today</a>
            </div>
          </div>
        </div>
      </div>
      <!-- FOOTER -->
      <footer>
        <p>&copy; 2013 Company, Inc. &middot; <a href="#">Privacy</a> &middot; <a href="#">Terms</a></p>
      </footer>
    </div><!-- /.carousel -->

    <!-- Le javascript
    ================================================== -->
    <!-- Placed at the end of the document so the 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>
twitter-bootstrapcarousel
42
Tyler B. Wear

Mise à jour Bootstrap 4 

Bootstrap 4 a classes d’utilitaires qui facilitent la création d’un carrousel en plein écran. Par exemple, utilisez la classe min-vh-100 sur le contenu carousel-item ...

<div class="carousel slide" data-ride="carousel">
      <div class="carousel-inner bg-info" role="listbox">
            <div class="carousel-item active">
                <div class="d-flex align-items-center justify-content-center min-vh-100">
                    <h1 class="display-1">ONE</h1>
                </div>
            </div>
      </div>
</div>

Démo de carrousel en plein écran

Cela fonctionne pour rendre les éléments du carrousel plein écran, mais les éléments du carrousel contenant des images ou des vidéos ayant une taille et un rapport de format spécifiques nécessitent un examen plus approfondi.

Comme le rapport h/w de la fenêtre d'affichage est susceptible d'être différent de celui de l'image ou de la vidéo, les images d'arrière-plan ou object-fit sont généralement utilisées pour redimensionner les images et les vidéos en "plein écran". Pour les vidéos, utilisez Bootstrap responsive embed classes selon les besoins pour le rapport vidéo (21: 9, 19: 9, etc ...).

Démo de vidéos plein écran

Réponse originale (Bootstrap 3)

Assurez-vous que l'image dans le carrousel est définie sur hauteur et largeur à 100%. Vous devez également vous assurer que le carrousel et les conteneurs .item (html, body) sont 100% ...

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

Démonstration du plein écran du carrousel Boostrap 3

Voici un exemple pour Bootstrap 3.x: http://www.codeply.com/go/2tVXo3mAtV

61
Zim

J'utilise un curseur pleine largeur dans presque tous les projets d'amorçage. Voici mon approche à ce sujet:

1) Emballez le carrousel dans un conteneur personnalisé de pleine largeur (en dehors de toute classe .container)
2) Réglez la largeur des diapositives d’image et son conteneur sur 100%
3) Réglez la hauteur du curseur à votre guise

Et ça va comme ça:

<section class="block">
    <div id="myCarousel" class="carousel slide">
        <div class="carousel-inner">
            <div class="active item">
                <img src="http://lorempixel.com/1024/750" alt="Slide1" />
            </div>
            <div class="item">
                <img src="http://lorempixel.com/1024/750" alt="Slide2" />
            </div>
            <div class="item">
                <img src="http://lorempixel.com/1024/750" alt="Slide3" />
            </div>
        </div>
        <a class="carousel-control left" href="#myCarousel" data-slide="prev">‹</a>
        <a class="carousel-control right" href="#myCarousel" data-slide="next">›</a>
    </div>
</section>

Et le CSS ressemblerait à ceci:

.carousel .item {
    width: 100%; /*slider width*/
    max-height: 600px; /*slider height*/
}
.carousel .item img {
    width: 100%; /*img width*/
}
/*full width container*/
@media (max-width: 767px) {
    .block {
        margin-left: -20px;
        margin-right: -20px;
    }
}
16
heyallan

Voici comment je l'ai fait. Cela fait que les images du diaporama occupent tout l’écran si le rapport de format le permet, sinon il est réduit.

.carousel {
    height: 100vh;
    width: 100%;
    overflow:hidden;
}
.carousel .carousel-inner {
    height:100%;    
}

Pour toujours obtenir un diaporama en plein écran, quel que soit le format de l’écran, vous pouvez également utiliser object-fit: (ne fonctionne pas dans IE ou Edge)

.carousel .carousel-inner img {
    display:block;
    object-fit: cover;
}
3
Turbojohan

J'ai trouvé une réponse sur le site startbootstrap.com. Essayez ce code:

CSS

html,
body {
    height: 100%;
}

.carousel,
.item,
.active {
    height: 100%;
}


.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;
}

footer {
    margin: 50px 0;
}

HTML

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

La source

2
Eric Watson

Vous pouvez le faire sans me forcer à html et body 100% hauteur. Utilisez plutôt la hauteur du port de visualisation. Et avec molette de la souris aussi.

function debounce(func, wait, immediate) {
  var timeout;
  return function() {
    var context = this,
      args = arguments;
    var later = function() {
      timeout = null;
      if (!immediate) func.apply(context, args);
    };
    var callNow = immediate && !timeout;
    clearTimeout(timeout);
    timeout = setTimeout(later, wait);
    if (callNow) func.apply(context, args);
  };
}

var slider = document.getElementById("demo");
var onScroll = debounce(function(direction) {
  //console.log(direction);
  if (direction == false) {
  	$('.carousel-control-next').click();
  } else {
  	$('.carousel-control-prev').click();
  }
}, 100, true);

slider.addEventListener("wheel", function(e) {
  e.preventDefault();
  var delta;
  if (event.wheelDelta) {
    delta = event.wheelDelta;
  } else {
    delta = -1 * event.deltaY;
  }

  onScroll(delta >= 0);
});
.carousel-item {
  height: 100vh;
  background: #212121;
}

.carousel-control-next,
.carousel-control-prev {
  width: 8% !important;
}

.carousel-item.active,
.carousel-item-left,
.carousel-item-right {
  display: flex !important;
  justify-content: center;
  align-items: center;
}

.carousel-item h1 {
    color: #fff;
    font-size: 72px;
    padding: 0 10%;
 }
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>


<div id="demo" class="carousel slide" data-ride="carousel" data-interval="false">

  <!-- The slideshow -->
  <div class="carousel-inner">
    <div class="carousel-item active">
      <h1 class="display-1 text-center">Lorem ipsum dolor sit amet adipisicing</h1>
    </div>
    <div class="carousel-item">
      <h1 class="display-1 text-center">Inventore omnis odio, dolore culpa atque?</h1>
    </div>
    <div class="carousel-item">
     <h1 class="display-1 text-center">Lorem ipsum dolor sit</h1>
    </div>
  </div>

  <!-- Left and right controls -->
  <a class="carousel-control-prev" href="#demo" data-slide="prev">
    <span class="carousel-control-prev-icon"></span>
  </a>
  <a class="carousel-control-next" href="#demo" data-slide="next">
    <span class="carousel-control-next-icon"></span>
  </a>

</div>

1
Razvan Zamfir

J'ai eu le même problème, et j'ai essayé avec les réponses ci-dessus, mais je voulais quelque chose de plus mince, puis j'ai essayé de changer les options une par une, et j'ai découvert qu'il fallait simplement ajouter

.carousel {
  height: 100%;
}
0
Comics Dealer