Bootstrap Carousel Full Screen
This is how I did it. This makes the images in the slideshow take up the full screen if it´s aspect ratio allows it, othervice it scales down.
.carousel {
height: 100vh;
width: 100%;
overflow:hidden;
}
.carousel .carousel-inner {
height:100%;
}
To allways get a full screen slideshow, no matter screen aspect ratio, you can also use object-fit: (doesn´t work in IE or Edge)
.carousel .carousel-inner img {
display:block;
object-fit: cover;
}
Update Bootstrap 4
Bootstrap 4 has utility classes that make it easier to create a full screen carousel. For example, use the min-vh-100
class on the carousel-item
content...
<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>
Full screen carousel demo
This works to make the carousel items full screen, but carousel items that contain images or videos that have a specific size & aspect ratio require further consideration.
Since the viewport h/w ratio is likely to be different than the image or video h/w ratio, usually background images or object-fit
are commonly used to size images and videos to "full screen". For videos, use the Bootstrap responsive embed classes as needed for the video ratio (21:9, 19:9, etc...).
Full screen videos demo
Also see: https://stackoverflow.com/a/58765043/171456
Original answer (Bootstrap 3)
Make sure the img inside the carousel item is set to height and width 100%. You also have to make sure the carousel and any of the .item containers (html,body) are 100%...
html,body{height:100%;}
.carousel,.item,.active{height:100%;}
.carousel-inner{height:100%;}
Boostrap 3 Full Screen Carousel Demo
Here's an example for Bootstrap 3.x: http://www.codeply.com/go/2tVXo3mAtV
You can do it without forcing html
and body
to me 100% height. Use view port height instead. And with mouse wheel control too.
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>
I found an answer on the startbootstrap.com. Try this 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>
Source