Carousel Full Screen Bootstrap 4

Question

I’m trying to make a first screen of a site with just a Carousel, so that it occupies the entire screen of the user (responsibly). Do you understand? Like the index screen will always be a full screen Carousel. I tried a lot of the net, but I still can’t. Not even using as background-image, as I’ve used on static pages.

It’s like the screen is the size of the image. But I wanted them to stay inside the div and receive the size of the main div, which in turn would be responsive and occupy the entire screen of the user. Help ae :D

/* Open when someone clicks on the span element */
function openNav() {
  document.getElementById("myNav").style.width = "100%";
}

/* Close when someone clicks on the "x" symbol inside the overlay */
function closeNav() {
  document.getElementById("myNav").style.width = "0%";
}

/* Muda o tempo do carousel, e tira o mousehover */
$('.carousel').carousel({
  interval: 3200,
  cycle: true,
  pause: "null"
})

/* ------------ carousel -------------------*/

.carousel-inner {
  list-style: none;
  /* aqui tiro a opção de passar SLIDEs < >  */
  position: relative!important;
  z-index: 1;
  top: 0;
  left: 0;
}


/* apagar os tracinhos que indicam onde a posição do carousel */

.carousel-indicators {
  opacity: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>

<!--  carousel  -->
<div class="col-md-12" id="slides">
  <div class="row">

    <div id="meuCarousel" class="carousel slide " data-ride="carousel">

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

      <div class="carousel-inner">
        <div class="carousel-item active">
          <img class="d-block w-100 img-fluid" src="https://i.stack.imgur.com/YNHbD.png" alt="primeiro slide">
        </div>
        <div class="carousel-item">
          <img class="d-block w-100 img-fluid" src="https://i.stack.imgur.com/YNHbD.png" alt="segundo slide">
        </div>
        <div class="carousel-item">
          <img class="d-block w-100 img-fluid" src="https://i.stack.imgur.com/YNHbD.png" alt="terceiro slide">
        </div>
      </div>

    </div>

  </div>
</div>

Answer 1

One solution is to apply the class w-100 à div #meuCarousel, apply the following CSS to the class .carousel-item:

.carousel-item{
   height: 100vh; /* dimensiona o slider à altura do viewport */
   background-size: cover;
   background-position: 50% 0;
}

And use the jQuery below to convert the images into background:

$(document).ready(function(){
   $(".carousel-item").each(function() {
      var src = $(this).find("img").attr("src");
      $(this)
      .css("background-image","url("+src+")")
      .find("img")
      .remove();
   });
});

Example:

$(document).ready(function(){
   $(".carousel-item").each(function() {
      var src = $(this).find("img").attr("src");
      $(this)
      .css("background-image","url("+src+")")
      .find("img")
      .remove();
   });
});

.carousel-inner{ 
	list-style: none; /* aqui tiro a opção de passar SLIDEs < >  */
	position: relative!important;
	z-index: 1;
	top: 0;
	left: 0;
}

/* apagar os tracinhos que indicam onde a posição do carousel */
.carousel-indicators{
	opacity: 0;
}

.carousel-item{
   height: 100vh;
   background-size: cover;
   background-position: 50% 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">

<div class="col-md-12" id="slides">
		<div class="row">

			<div id="meuCarousel" class="carousel slide w-100" data-ride="carousel">

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

				<div class="carousel-inner">
					<div class="carousel-item active">
						<img class="d-block w-100 img-fluid" src="https://www.cleverfiles.com/howto/wp-content/uploads/2016/08/mini.jpg" alt="primeiro slide">
					</div>
					<div class="carousel-item">
						<img class="d-block w-100 img-fluid" src="https://image.freepik.com/fotos-gratis/hrc-tigre-siberiano-2-jpg_21253111.jpg" alt="segundo slide">
					</div>
					<div class="carousel-item">
						<img class="d-block w-100 img-fluid" src="https://www.salford.ac.uk/__data/assets/image/0008/890072/varieties/lightbox.jpg" alt="terceiro slide">
					</div>
				</div>

			</div>

		</div>
	</div>