0

Hola estoy teniendo un problema que no se como resolver con el armado de una estructura en bootstrap 3 donde tengo un carousel en uno de los costados, adjunto la imagen de como seria el ejemplo y adjunto el código que yo implemente para este caso. Lo que necesito es que el carousel quede estático y que ocupe el 100% de la columna derecha en desktop, tablet y que no le generes blancos (verde de fondo) del lado derecho cuando uno hace control menos con el teclado. y que en mobile se adapte. Por otro lado necesito que los contenidos de texto esten contenido dentro de los 1170px del container

.nuestro-equipo-instalaciones{
	height: 500px;
}
.nuestro-equipo-instalaciones h3{
	margin: 0;
	color: #fff;
	font-weight: 300;
	text-transform: uppercase
}
.nuestro-equipo-instalaciones h4{
	color: #fff;
	line-height: 24px;
	font-weight: 300;
	margin-top: 20px;
	font-size: 19px;
	font-style: italic;
	margin-bottom: 20px;
}
.nuestro-equipo-instalaciones p{
	color: #fff;
	line-height: 24px;
	font-weight: 300;
	font-size: 17px;
	font-style: italic;
	margin-bottom: 40px;
}
.nuestro-equipo-instalaciones .content-equipo{
	padding: 45px 0
}
.nuestro-equipo-instalaciones .absolute {
  position: absolute;
  width: 100%;
  height: 500px;
}
.nuestro-equipo-instalaciones .absolute .white,
.nuestro-equipo-instalaciones .absolute .rotador {
  float: left;
  width: 100%;
  height: 500px;
  background-color: #55b5c5;
}
@media (min-width: 768px) {
  .nuestro-equipo-instalaciones .absolute .white,
  .nuestro-equipo-instalaciones .absolute .rotador {
    width: 50%;
    height: 100%;
  }
}
.nuestro-equipo-instalaciones .absolute .rotador {
  background-color: #5dafaf;

}
.nuestro-equipo-instalaciones .fixed-height {
  height: 100%;
}

.nuestro-equipo-instalaciones .carousel{
	top: 0
}
.nuestro-equipo-instalaciones .carousel-inner {
  border-radius: 15px;
}

.nuestro-equipo-instalaciones .carousel-caption {
  background-color: rgba(0,0,0,.5);
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10;
  padding: 0 0 10px 25px;
  color: #fff;
  text-align: left;
}

.nuestro-equipo-instalaciones .carousel-indicators {
  position: absolute;
  bottom: 0;
  right: 0;
  left: 0;
  width: 100%;
  z-index: 15;
  margin: 0;
  padding: 0 25px 25px 0;
  text-align: right;
}

.nuestro-equipo-instalaciones .carousel-control.left,
.nuestro-equipo-instalaciones .carousel-control.right {
  background-image: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
  <section class="nuestro-equipo-instalaciones">
		<div class="absolute">
		  <div class="white"></div>
		  <div class="rotador"></div>
		</div>
		<div class="container">
		  <div class="row">
		    <div class="col-xs-12 col-sm-6 fixed-height">
		    	<div class="content-equipo">
		    		<h3>Nuestro equipo</h3>
		    		<h4>Entendemos los aspectos médicos, emocionales y financieros que implican su salud y actuamos en consecuencia.</h4>
		    		<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In risus. Pellentesque nibh dolor, vestibulum sed, accumsan a, convallis sit amet, quam. Vestibulum lacus metus, pellentesque non, vestibulum ut, viverra sit amet, purus. Integer tempus quam posuere augue. </p>
		    		<div class="col-sm-4 col-lg-4 sin-padding">
		    			<img class="img-responsive center-block" src="images/corazon-mano.png" alt="">
		    		</div>
		    		<div class="col-sm-4 col-lg-4 sin-padding">
		    			<img class="img-responsive center-block" src="images/nino-nacido.png" alt="">
		    		</div>
		    		<div class="col-sm-4 col-lg-4 sin-padding">
		    			<img class="img-responsive center-block" src="images/embarazada.png" alt="">
		    		</div>
		    	</div>
		    </div>
		    <div class="col-xs-12 col-lg-6 fixed-height">
		    	<div class="col-lg-12">
			    <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
			      <!-- Indicators -->
			      <ol class="carousel-indicators">
			        <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
			        <li data-target="#carousel-example-generic" data-slide-to="1"></li>
			        <li data-target="#carousel-example-generic" data-slide-to="2"></li>
			      </ol>

			      	
			     
			      <!-- Wrapper for slides -->
			      <div class="carousel-inner">
			        <div class="item active">
			          <img src="http://placehold.it/800x400" alt="...">
			          <div class="carousel-caption">
			            <h2>Heading</h2>
			          </div>
			        </div>
			        <div class="item">
			          <img src="http://placehold.it/800x400" alt="...">
			          <div class="carousel-caption">
			            <h2>Heading</h2>
			          </div>
			        </div>
			        <div class="item">
			          <img src="http://placehold.it/800x400" alt="...">
			          <div class="carousel-caption">
			            <h2>Heading</h2>
			          </div>
			        </div>
			      </div>

			      <!-- Controls -->
			      <a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">
			        <span class="glyphicon glyphicon-chevron-left"></span>
			      </a>
			      <a class="right carousel-control" href="#carousel-example-generic" data-slide="next">
			        <span class="glyphicon glyphicon-chevron-right"></span>
			      </a>
			    </div>
			     </div>
		    </div>
		  </div>
		</div>
	</section>

imagen adjuntao.

1 respuesta 1

1
  1. Lo que necesito es que el carousel quede estático

¿Como así? Que no se mueva? O te refieres a posicionarlo a su estado inicial: `static´?

  1. Que ocupe el 100% de la columna derecha en desktop (y) tablet.
  1. Cambia la clase container por container-fluid.
  2. Agrega al container fluid, la clase customize.
  3. Hay que corregir primero todos los márgenes que agrega bootstrap en los row, containers y cols, luego agregarlos nuevamente en el div donde tienes el contenido, para hacerlo en tu css agrega lo siguiente:

.container-fluid.customize{
  padding: 0;
}

.nuestro-equipo-instalaciones .container-fluid.customize .fixed-height{
  padding: 0;
}

.nuestro-equipo-instalaciones .container-fluid.customize .content-equipo {
  padding: 0 15px;
}

.container-fluid.customize .row{
  margin: 0;
}

  1. Que no le generes blancos (verde de fondo) del lado derecho cuando uno hace control menos con el teclado.

Esto ya es algo que depende mucho de los estilos que manejes y las medidas que uses, porque cuando se presenta un error como este, es por usar mal las medidas o abusar demasiado de las medidas con pixeles, en vez de usar em

  1. Y que en mobile se adapte.

¿Como se debe adaptar? Si es al 100% del ancho, ya lo hace con lo que configuramos arriba.

  1. Por otro lado necesito que los contenidos de texto esten contenido dentro de los 1170px del container

Esto contradice la maquetación que pides de que el carrusel cubra siempre la mitad de la pantalla, es es un tipo de maquetación no contemplada por bootstrap en principio. Sin embargo, hay una que otra forma de lograrlo, te voy a mostrar una usando calcy medidas relativas al viewport vw, pero son soluciones que aunque pueden funcionar a primera vista, no están carentes de errores en un futuro.

.nuestro-equipo-instalaciones .container-fluid.customize .content-equipo {
    padding-left: calc( (100vw - 1170px)/2 );
}

Eso lo debes agregar en tu media querie y si hay más de uno, agregar dependiendo del ancho máximo del contenedor, ahora te voy a mostrar un demo de como se vería tu carrusel con las correcciones anteriores y comparadas con el mismo código abajo, también añadí una guia usando los estilos aplicados al body::before, para mostrarte donde estaría el contenedor de 1170px que puedes borrar sin problema, ya que es solo para la demo:

/*Contenido solo para la demo, borrar*/
body::before{
  content: '';
  position: fixed;
  z-index: 10;
  width: 100%;
  max-width: 1170px;
  height: 100vh;
  box-shadow: inset 0 0 0 2px black;
  pointer-events: none;
  left: 50%;
  transform: translateX(-50%);
}
/*Contenido solo para la demo, borrar*/

.container-fluid.customize{
  padding-left: 0;
  padding-right: 0;
}

.nuestro-equipo-instalaciones .container-fluid.customize .fixed-height{
  padding-left: 0;
  padding-right: 0;
}

.nuestro-equipo-instalaciones .container-fluid.customize .content-equipo {
  padding-left: 15px;
  padding-right: 15px;
}

.container-fluid.customize .row{
  margin: 0;
}

.nuestro-equipo-instalaciones{
  height: 500px;
}
.nuestro-equipo-instalaciones h3{
  margin: 0;
  color: #fff;
  font-weight: 300;
  text-transform: uppercase
}
.nuestro-equipo-instalaciones h4{
  color: #fff;
  line-height: 24px;
  font-weight: 300;
  margin-top: 20px;
  font-size: 19px;
  font-style: italic;
  margin-bottom: 20px;
}
.nuestro-equipo-instalaciones p{
	color: #fff;
	line-height: 24px;
	font-weight: 300;
	font-size: 17px;
	font-style: italic;
	margin-bottom: 40px;
}
.nuestro-equipo-instalaciones .content-equipo{
  padding: 45px 0;  
}
.nuestro-equipo-instalaciones .absolute {
  position: absolute;
  width: 100%;
  height: 500px;
}
.nuestro-equipo-instalaciones .absolute .white,
.nuestro-equipo-instalaciones .absolute .rotador {
  float: left;
  width: 100%;
  height: 500px;
  background-color: #55b5c5;
}
.nuestro-equipo-instalaciones .absolute .rotador {
  background-color: #5dafaf;

}
.nuestro-equipo-instalaciones .fixed-height {
  height: 100%;
}

.nuestro-equipo-instalaciones .carousel{
	top: 0
}
.nuestro-equipo-instalaciones .carousel-inner {
  border-radius: 15px;
}

.nuestro-equipo-instalaciones .carousel-caption {
  background-color: rgba(0,0,0,.5);
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10;
  padding: 0 0 10px 25px;
  color: #fff;
  text-align: left;
}

.nuestro-equipo-instalaciones .carousel-indicators {
  position: absolute;
  bottom: 0;
  right: 0;
  left: 0;
  width: 100%;
  z-index: 15;
  margin: 0;
  padding: 0 25px 25px 0;
  text-align: right;
}

.nuestro-equipo-instalaciones .carousel-control.left,
.nuestro-equipo-instalaciones .carousel-control.right {
  background-image: none;
}

@media (min-width: 768px) {
  .nuestro-equipo-instalaciones .absolute .white,
  .nuestro-equipo-instalaciones .absolute .rotador {
    width: 50%;
    height: 100%;
  }
  .nuestro-equipo-instalaciones .container-fluid.customize .content-equipo {
    padding-left: calc( ((100vw - 1170px)/2) + 10px );
  }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<section class="nuestro-equipo-instalaciones">
  <div class="absolute">
    <div class="white"></div>
    <div class="rotador"></div>
  </div>
  <div class="container-fluid customize">
    <div class="row">
      <div class="col-xs-12 col-sm-6 fixed-height">
        <div class="content-equipo">
          <h3>Nuestro equipo</h3>
          <h4>Entendemos los aspectos médicos, emocionales y financieros que implican su salud y actuamos en consecuencia.</h4>
          <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In risus. Pellentesque nibh dolor, vestibulum sed, accumsan a, convallis sit amet, quam. Vestibulum lacus metus, pellentesque non, vestibulum ut, viverra sit amet, purus. Integer tempus
            quam posuere augue. </p>
          <div class="col-sm-4 col-lg-4 sin-padding">
            <img class="img-responsive center-block" src="images/corazon-mano.png" alt="">
          </div>
          <div class="col-sm-4 col-lg-4 sin-padding">
            <img class="img-responsive center-block" src="images/nino-nacido.png" alt="">
          </div>
          <div class="col-sm-4 col-lg-4 sin-padding">
            <img class="img-responsive center-block" src="images/embarazada.png" alt="">
          </div>
        </div>
      </div>
      <div class="col-xs-12 col-lg-6 fixed-height">
        <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
          <!-- Indicators -->
          <ol class="carousel-indicators">
            <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
            <li data-target="#carousel-example-generic" data-slide-to="1"></li>
            <li data-target="#carousel-example-generic" data-slide-to="2"></li>
          </ol>

          <!-- Wrapper for slides -->
          <div class="carousel-inner">
            <div class="item active">
              <img src="http://placehold.it/800x400" alt="...">
              <div class="carousel-caption">
                <h2>Heading</h2>
              </div>
            </div>
            <div class="item">
              <img src="http://placehold.it/800x400" alt="...">
              <div class="carousel-caption">
                <h2>Heading</h2>
              </div>
            </div>
            <div class="item">
              <img src="http://placehold.it/800x400" alt="...">
              <div class="carousel-caption">
                <h2>Heading</h2>
              </div>
            </div>
          </div>

          <!-- Controls -->
          <a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
          <a class="right carousel-control" href="#carousel-example-generic" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
        </div>
      </div>
    </div>
  </div>
</section>
<div class="clearfix"></div>
<section class="nuestro-equipo-instalaciones">
  <div class="absolute">
    <div class="white"></div>
    <div class="rotador"></div>
  </div>
  <div class="container customize">
    <div class="row">
      <div class="col-xs-12 col-sm-6 fixed-height">
        <div class="content-equipo">
          <h3>Nuestro equipo</h3>
          <h4>Entendemos los aspectos médicos, emocionales y financieros que implican su salud y actuamos en consecuencia.</h4>
          <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In risus. Pellentesque nibh dolor, vestibulum sed, accumsan a, convallis sit amet, quam. Vestibulum lacus metus, pellentesque non, vestibulum ut, viverra sit amet, purus. Integer tempus
            quam posuere augue. </p>
          <div class="col-sm-4 col-lg-4 sin-padding">
            <img class="img-responsive center-block" src="images/corazon-mano.png" alt="">
          </div>
          <div class="col-sm-4 col-lg-4 sin-padding">
            <img class="img-responsive center-block" src="images/nino-nacido.png" alt="">
          </div>
          <div class="col-sm-4 col-lg-4 sin-padding">
            <img class="img-responsive center-block" src="images/embarazada.png" alt="">
          </div>
        </div>
      </div>
      <div class="col-xs-12 col-lg-6 fixed-height">
        <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
          <!-- Indicators -->
          <ol class="carousel-indicators">
            <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
            <li data-target="#carousel-example-generic" data-slide-to="1"></li>
            <li data-target="#carousel-example-generic" data-slide-to="2"></li>
          </ol>

          <!-- Wrapper for slides -->
          <div class="carousel-inner">
            <div class="item active">
              <img src="http://placehold.it/800x400" alt="...">
              <div class="carousel-caption">
                <h2>Heading</h2>
              </div>
            </div>
            <div class="item">
              <img src="http://placehold.it/800x400" alt="...">
              <div class="carousel-caption">
                <h2>Heading</h2>
              </div>
            </div>
            <div class="item">
              <img src="http://placehold.it/800x400" alt="...">
              <div class="carousel-caption">
                <h2>Heading</h2>
              </div>
            </div>
          </div>

          <!-- Controls -->
          <a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
          <a class="right carousel-control" href="#carousel-example-generic" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
        </div>
      </div>
    </div>
  </div>
</section>

1
  • Genial Edgar! exactamente era lo que quería. la idea era que el carousel quede del lado derecho y que ocupara el 100% de la columna de 6, gracias!
    – MarianoF
    Commented el 7 feb. 2018 a las 16:27

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.