Estoy tratando de conseguir la imagen en el bootstrap de carrusel para mostrar la pantalla completa, pero no he sido capaz de averiguar, he estado trabajando en esto por un tiempo y estoy totalmente atascado. Ahora mismo sólo tengo una imagen, pero voy a añadir más de una vez funciona…

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

6 Comentarios

  1. 68

    Actualización De Bootstrap 4

    Bootstrap 4 ha clases de utilidad que hacen que sea más fácil para crear una pantalla de carrusel. Por ejemplo, el uso de la min-vh-100 de la clase en el carousel-item contenido…

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

    Pantalla completa de demostración del carrusel

    Esto funciona para hacer el carrusel de elementos en pantalla completa, pero el carrusel de los elementos que contienen las imágenes o videos que tienen un determinado tamaño & relación de aspecto requieren un mayor estudio.

    Desde la ventanilla de h/w ratio es probable que sea diferente de la imagen o el vídeo de h/w ratio, generalmente de imágenes de fondo o object-fit se utilizan comúnmente para el tamaño de las imágenes y los vídeos a «pantalla completa». Para los vídeos, uso de Bootstrap sensible incrustar clases como necesarios para el video ratio (21:9, 19:9, etc…).

    Pantalla completa los vídeos de demostración


    Respuesta Original (Bootstrap 3)

    Asegúrese de que la img de dentro del carrusel elemento se establece la altura y el ancho de 100%. Usted también tiene que asegurarse de que el carrusel y cualquiera de los .contenedores de elementos (html,body) son 100%…

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

    Boostrap 3 Pantalla Completa Carrusel Demo

    He aquí un ejemplo para el Bootstrap 3.x:
    http://www.codeply.com/go/2tVXo3mAtV

  2. 16

    Puedo usar control deslizante de ancho en casi todos bootstrap proyecto. Aquí está mi enfoque:

    1) Ajuste el carrusel en una costumbre de todo el ancho del contenedor (fuera de cualquier .container clase)

    2) Establecer el ancho de la imagen de las diapositivas y su recipiente en un 100%

    3) Establecer la altura de la barra como se desee

    Y dice así:

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

    Y el CSS tendría este aspecto:

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

    Esta es la forma en que lo hice. Esto hace que las imágenes en la presentación de diapositivas ocupan toda la pantalla si su relación de aspecto permite, othervice escalas hacia abajo.

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

    Para siempre obtener una pantalla completa presentación de diapositivas, no importa proporción de aspecto de pantalla, también puede utilizar el objeto de ajuste: (no funciona en IE o Borde)

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

    He encontrado una respuesta en la startbootstrap.com. Prueba este código:

    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>

    Fuente

  5. 1

    Usted puede hacerlo sin forzar html y body para mí 100% de la altura. Uso de la vista del puerto de altura en su lugar. Y con ratón de la rueda de control demasiado.

    JS:

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

    CSS:

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

    HTML:

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

  6. 0

    Estoy tuvo el mismo problema, y he probado con las respuestas anteriores, pero yo quería algo más delgado, entonces traté de cambiar uno por uno opsions, y descubrir que sólo tenemos que añadir la

    .carousel {
    height: 100%;
    }
    • Por favor, explique cómo llegó a su respuesta en vez de darle para que otros puedan aprender de ella.
    • El trabajo para mí!, pero creo que también debe cambiar las dimensiones de las imágenes demasiado,.. me puedo cambiar (o cosecha) todas las imágenes en escala de 1280 : 720

Dejar respuesta

Please enter your comment!
Please enter your name here