2

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>

1 Resposta 1

1

Uma solução é aplicar a classe w-100 à div #meuCarousel, aplicar o seguinte CSS à classe .carousel-item:

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

E usar o jQuery abaixo para converter as imagens em background:

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

Exemplo:

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

4
  • Fala Phelipe. Brother, obg desde já, mas essa config acho que já resolvi com a classe w-100. Porém é justamente esse scroll que não quero. Quero a imagem se adequando as telas. No width ela fica ok, quando diminuo a tela ela fica ok no width, mas se eu deixar, por exemplo, no formato mobile, ela mostra uma parte branca em baixo, não completando o heigth... penso ser isso... Queria deixar assim -> sdrnaweb.com <- redimensiona esta página pra você sacar como estou falando...
    – user84584
    Commented 12/02/2018 às 16:56
  • Entendi, mas dependendo da proporção da tela, a imagem é cortada.
    – Sam
    Commented 12/02/2018 às 18:26
  • @EvertonLevi Atualizei a resposta com uma sugestão bem prática.
    – Sam
    Commented 12/02/2018 às 18:50
  • Amigo, perfeito! O resultado é exatamente isso! Muito obrigado MESMO! Abraço!!!
    – user84584
    Commented 12/02/2018 às 19:18

Você deve fazer log-in para responder a esta pergunta.