Bootstrap - Carousel height responsive but not dependent on content

Question

Bootstrap - Carousel height responsive but not dependent on content

Navigation

#1 by (1 votes)
#2 by (0 votes)

0

I have a carousel made with Bootstrap 4 but I have a problem. Each slide changes height because although the images are all the same size, the text and buttons that each slide contains are variable. Can you lend me a hand, please? What I need is that when changing the slide in any screen size, the height of the carousel is always the same

HTML:

<section>
    <div id="carrusel" class="carousel slide" data-ride="carousel">
      <div class="carousel-inner">
        <div class="carousel-item slide1 active">
          <div class="container text-center">
            <h1 class="display-4 mb-4">Software para el sector energético</h1>
            <p class="lead">Si eres generador, distribuidor o comercializador de energía y quieres que tu software aporte un valor añadido a tu negocio, déjanos mostrarte lo que <strong>Divakia</strong> tiene para tí</p>
            <div class="btn-group mt-4" role="group" aria-label="button">
              <a class="btn btn-success btn-lg px-5" href="#contenidoPrincipal">SIAE</a>
              <a class="btn btn-light btn-lg px-4" href="servicios.html">Servicios</a>
            </div>
          </div>
        </div>

        <div class="carousel-item slide2">
          <div class="container text-center">
            <h1 class="display-4 mb-4">Software responsive multidispositivo</h1>
            <p class="lead">Sabemos que hoy en día el trabajo debe realizarse desde cualquier lugar del planeta. Por eso nuestros aplicativos son totalmente operativos en la gran mayoría de los dispositivos. Para que puedas trabajar con la misma facilidad y seguridad estés donde estés</p>
          </div>
        </div>

        <div class="carousel-item slide3">
          <div class="container text-center">
            <h1 class="display-4 mb-4">La calidad es nuestra razón de ser</h1>
            <p class="lead">Si lo que quieres es recibir un servicio de calidad, cercano y con un alto valor añadido para tu negocio, no dudes en hablar con Divakia. Nuestro objetivo es hacer que todo sea más fácil, eficiente y flexible para nuestros clientes</p>
          </div>
        </div>

      </div>
        <a class="carousel-control-prev" href="#carrusel" role="button" data-slide="prev">
        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
        <span class="sr-only">Previo</span>
      </a>
      <a class="carousel-control-next" href="#carrusel" role="button" data-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="sr-only">Siguiente</span>
      </a>
    </div>
</section>

and the slides css is:

.slide1 {
    background-size: cover;
    background: linear-gradient(#666, transparent 90%),
                linear-gradient(0deg, #222, transparent),
                #fff url('../img/jumbotron_bg.jpg') no-repeat center;
}

.slide2 {
    background-size: cover;
    background: linear-gradient(#666, transparent 90%),
                linear-gradient(0deg, #222, transparent),
                #fff url('../img/responsive.jpg') no-repeat center;
}

.slide3 {
    background-size: cover;
    background: linear-gradient(#666, transparent 90%),
                linear-gradient(0deg, #222, transparent),
                #fff url('../img/molinos.jpg') no-repeat center;
}

bootstrap

asked by David Katua 17.01.2018 в 10:05

source

2 answers

How can I see the results in pesos ($ 0.00)? UPDATE trigger mysql

score 1 · Answer 1

The problem I saw is that the images are not by the <img/> tag but are a background that makes the .carousel-item fit the text and not the image, the solution I saw was to go through every .carousel-item and see which was the largest and once detected set the min-height for all and so they are all the same size, it is assumed that by setting the height to all with respect to the highest height not You would have a problem:

var alto = 0;
$("#carrusel .carousel-item").each(function(index,elemento){

  if(alto < $(elemento).height()){
    alto = $(elemento).height();
  }

});

$("#carrusel .carousel-item").css("min-height",alto);

.slide1 {
    background-size: cover;
    background: linear-gradient(#666, transparent 90%),
                linear-gradient(0deg, #222, transparent),
                #fff url('../img/jumbotron_bg.jpg') no-repeat center;
}

.slide2 {
    background-size: cover;
    background: linear-gradient(#666, transparent 90%),
                linear-gradient(0deg, #222, transparent),
                #fff url('../img/responsive.jpg') no-repeat center;
}

.slide3 {
    background-size: cover;
    background: linear-gradient(#666, transparent 90%),
                linear-gradient(0deg, #222, transparent),
                #fff url('../img/molinos.jpg') no-repeat center;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

<section>
    <div id="carrusel" class="carousel slide" data-ride="carousel">
      <div class="carousel-inner">
        <div class="carousel-item slide1 active">
          <div class="container text-center">
            <h1 class="display-4 mb-4">Software para el sector energético</h1>
            <p class="lead">Si eres generador, distribuidor o comercializador de energía y quieres que tu software aporte un valor añadido a tu negocio, déjanos mostrarte lo que <strong>Divakia</strong> tiene para tí</p>
            <div class="btn-group mt-4" role="group" aria-label="button">
              <a class="btn btn-success btn-lg px-5" href="#contenidoPrincipal">SIAE</a>
              <a class="btn btn-light btn-lg px-4" href="servicios.html">Servicios</a>
            </div>
          </div>
        </div>

        <div class="carousel-item slide2">
          <div class="container text-center">
            <h1 class="display-4 mb-4">Software responsive multidispositivo</h1>
            <p class="lead">Sabemos que hoy en día el trabajo debe realizarse desde cualquier lugar del planeta. Por eso nuestros aplicativos son totalmente operativos en la gran mayoría de los dispositivos. Para que puedas trabajar con la misma facilidad y seguridad estés donde estés</p>
          </div>
        </div>

        <div class="carousel-item slide3">
          <div class="container text-center">
            <h1 class="display-4 mb-4">La calidad es nuestra razón de ser</h1>
            <p class="lead">Si lo que quieres es recibir un servicio de calidad, cercano y con un alto valor añadido para tu negocio, no dudes en hablar con Divakia. Nuestro objetivo es hacer que todo sea más fácil, eficiente y flexible para nuestros clientes</p>
          </div>
        </div>

      </div>
        <a class="carousel-control-prev" href="#carrusel" role="button" data-slide="prev">
        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
        <span class="sr-only">Previo</span>
      </a>
      <a class="carousel-control-next" href="#carrusel" role="button" data-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="sr-only">Siguiente</span>
      </a>
    </div>
</section>

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>

I hope you find it useful.

score 0 · Answer 2

I would recommend you do the following: In the CSS

.carousel-inner {
  height: (la altura de la imagen);
  overflow: hidden;
}

With this you hide everything that is outside the stipulated height. If you put a static height it is true that it can change if your images are responsive, but with queries or jquery socks it is easy to manage that:

I pass two links that explains more extensive what I tell you. link

link