Carousel Fullscreen Bootstrap 4

Question

Carousel Fullscreen Bootstrap 4

Navigation

#1 by (1 votes)

1

I'm trying to make a first screen of a website with only a Carousel, so that it is occupying the entire screen of the user (responsively). You see? Type the index screen will always be a full screen carousel. I tried a lot of the net, but I still can not. Not even using as background-image, as I've used in static pages.

It is as if the screen is in 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 would occupy the entire user screen. 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><linkhref="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--><divclass="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>

html5 css3 bootstrap-4

asked by anonymous 12.02.2018 / 01:22

1 answer

Change the name of a table in the H2 Database Engine Python language format function in C #

score 1 · Answer 1

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

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

And use jQuery below to convert the images to 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><scriptsrc="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>