Bootstrap Carousel Plein écran

J’essaie d’obtenir l’image dans le carrousel bootstrap pour montrer en plein écran, mais je n’ai pas été capable de le comprendre, j’ai travaillé sur cela pendant un certain temps et je suis totalement coincé. Pour le moment, je n’ai qu’une image, mais j’en appendai une fois que cela fonctionnera …

    Carousel Template · Bootstrap        /* 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; } }                                !function ($) { $(function(){ // carousel demo $('#myCarousel').carousel() }) }(window.jQuery)    body { background-color: black; color: #FFFFFF; }    

Assurez-vous que l’img à l’intérieur du carrousel est réglé sur la hauteur et la largeur à 100%. Vous devez également vous assurer que le carrousel et l’un des conteneurs .item (HTML, corps) sont à 100% …

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

Boostrap Full Screen Carousel Demo

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

J’utilise un curseur pleine largeur dans presque tous les projets bootstrap. Voici mon approche:

1) Enroulez le carrousel dans un conteneur personnalisé (hors de toute classe .container )
2) Définissez la largeur des diapositives et de leur conteneur sur 100%
3) Définissez la hauteur du curseur comme vous le souhaitez

Et ça va comme ça:

 

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

J’ai trouvé une réponse sur 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

   

La source

C’est comme ça que je l’ai fait. Cela fait que les images du diaporama prennent tout l´écran si le rapport hauteur / largeur le permet.

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

Pour toujours obtenir un diaporama en plein écran, quel que soit le rapport hauteur / largeur de l’écran, vous pouvez également utiliser un ajustement d’object: (ne fonctionne pas dans IE ou Edge)

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

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 de découvrir que nous avons juste besoin d’append

 .carousel { height: 100%; } 

Vous pouvez le faire sans forcer html et le body à moi 100% de hauteur. Utilisez plutôt la hauteur du port d’affichage. Et avec le contrôle de la 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%; }