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 😀
/* 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; } <!-- 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="imagens/slide1.jpg" alt="primeiro slide"> </div> <div class="carousel-item"> <img class="d-block w-100 img-fluid" src="imagens/slide2.jpg" alt="segundo slide"> </div> <div class="carousel-item"> <img class="d-block w-100 img-fluid" src="imagens/slide3.jpg" alt="terceiro slide"> </div> </div> </div> </div> </div>
