Estou tentando fazer uma primeira tela de um site apenas com um Carousel, para que fique ocupando toda a tela do usuário (de forma responsiva). Entende? Tipo a tela index sempre será um carousel tela cheia. Tentei muita coisa da net, mas ainda não consegui. Nem mesmo usando como background-image, como já usei em páginas estáticas.
É como se a tela ficasse no tamanho da imagem. Mas queria que elas ficassem dentro da div e recebesse o tamanho da div principal, que por sua vez seria responsiva e ocuparia toda a tela do usuário. Ajuda 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.sstatic.net/YNHbD.png" alt="primeiro slide">
</div>
<div class="carousel-item">
<img class="d-block w-100 img-fluid" src="https://i.sstatic.net/YNHbD.png" alt="segundo slide">
</div>
<div class="carousel-item">
<img class="d-block w-100 img-fluid" src="https://i.sstatic.net/YNHbD.png" alt="terceiro slide">
</div>
</div>
</div>
</div>
</div>