1

Hola a ver si me pueden ayudar, estoy usando un carousel en bootstrap y resulta que quiero que el contenido de texto y producto me quede centrado en la grilla de bootstrap de 1170px. Use a modo de ejemplo el siguiente código que adjunto. La idea de este carousel es que quede como la imagen adjunta el problema surje que cada imagen tiene un caption con el contenido de texto y un producto flotado. Estos caption tienen container pero no me da respuesta y no me centra el contenido.

/*
-----------------------------------
    Code snippet by @maridlcrmn
    Credits images: www.unsplash.com
-----------------------------------
*/

#thumbnail-preview-indicators {
  position: relative;
  overflow: hidden;
}
#thumbnail-preview-indicators .slides .slide-1, 
#thumbnail-preview-indicators .slides .slide-2,
#thumbnail-preview-indicators .slides .slide-3 {
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}
    #thumbnail-preview-indicators,
    #thumbnail-preview-indicators .slides,
    #thumbnail-preview-indicators .slides .slide-1, 
    #thumbnail-preview-indicators .slides .slide-2,
    #thumbnail-preview-indicators .slides .slide-3 {
      height: 480px;
    }
#thumbnail-preview-indicators .slides .slide-1 {
  background-image: url(https://s3.amazonaws.com/ooomf-com-files/wdXqHcTwSTmLuKOGz92L_Landscape.jpg); 
}
#thumbnail-preview-indicators .slides .slide-2 {
  background-image: url(https://s3.amazonaws.com/ooomf-com-files/tU3ptNgGSP6U2fE67Gvy_SYDNEY-162.jpg);
}
#thumbnail-preview-indicators .slides .slide-3 {
  background-image: url(https://s3.amazonaws.com/ooomf-com-files/mtNrf7oxS4uSxTzMBWfQ_DSC_0043.jpg);
}
#thumbnail-preview-indicators .carousel-inner .item .carousel-caption {
  top: 20%;
  bottom: inherit;
}
#thumbnail-preview-indicators .carousel-indicators li,
#thumbnail-preview-indicators .carousel-indicators li.active {
  position: relative;
  width: 100px;
  height: 8px;  
}
#thumbnail-preview-indicators .carousel-indicators li > .thumbnail {
  position: absolute;
  top: 0;
  width: 100px;
  display: none;
  opacity: 0;
  left: 50%;
  margin-top: -80px;
  margin-left: -50px;
}
#thumbnail-preview-indicators .carousel-indicators li:hover > .thumbnail,
#thumbnail-preview-indicators .carousel-indicators li.active > .thumbnail {
  display: block;
  opacity: .8;
}
#thumbnail-preview-indicators .carousel-indicators li.active > .thumbnail:hover{
  opacity: 1;
}
@media screen and (max-width : 480px) {    
    #thumbnail-preview-indicators .carousel-indicators li,
    #thumbnail-preview-indicators .carousel-indicators li.active {
      width: 50px;
      height: 8px;
      position: relative;
    }
    #thumbnail-preview-indicators .carousel-indicators li > .thumbnail {
       width: 50px;
       left: 50%;
       margin-top: -50px;
       margin-left: -25px;
    }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div id="thumbnail-preview-indicators" class="carousel slide" data-ride="carousel">
          <!-- Indicators -->
          <ol class="carousel-indicators">
            <li data-target="#thumbnail-preview-indicators" data-slide-to="0" class="active">
              <div class="thumbnail">
                <img class="img-responsive" src="https://s3.amazonaws.com/ooomf-com-files/wdXqHcTwSTmLuKOGz92L_Landscape.jpg">
              </div>
            </li>
            <li data-target="#thumbnail-preview-indicators" data-slide-to="1">
            <div class="thumbnail">
                <img class="img-responsive" src="https://s3.amazonaws.com/ooomf-com-files/tU3ptNgGSP6U2fE67Gvy_SYDNEY-162.jpg">
              </div>
            </li>
            <li data-target="#thumbnail-preview-indicators" data-slide-to="2">
            <div class="thumbnail">
                <img class="img-responsive" src="https://s3.amazonaws.com/ooomf-com-files/mtNrf7oxS4uSxTzMBWfQ_DSC_0043.jpg">
              </div>
            </li>
          </ol>
          <div class="carousel-inner">
            <div class="item slides active">
              <div class="slide-1"></div>
              <div class="container">
                <div class="carousel-caption">
                        <div class="carousel-caption">
                              <div class="col-lg-7">
                                <h1>DATE EL GUSTO,</h1>
                                <span class="title-rotador">sin Gluten.</span>
                                <br>
                                <a class="btn btn-lg btn-primary" href="#" role="button">Learn more</a>
                              </div>
                              <div class="col-lg-5 imagen-producto">
                                <img src="images/galletitas-rotador.png">
                              </div>  
                        </div>
                </div>
              </div>
            </div>
            <div class="item slides">
              <div class="slide-2"></div>
              <div class="container">
                <div class="carousel-caption">
                  <h1>Another example headline.</h1>
                  <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam.</p>
                  <p><a class="btn btn-lg btn-primary" href="#" role="button">Learn more</a></p>
                </div>
              </div>
            </div>
            <div class="item slides">
              <div class="slide-3"></div>
              <div class="container">
                <div class="carousel-caption">
                  <h1>One more for good measure.</h1>
                  <p>Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
                  <p><a class="btn btn-lg btn-primary" href="#" role="button">Browse gallery</a></p>
                </div>
              </div>
            </div>
          </div>
          <a class="left carousel-control" href="#thumbnail-preview-indicators" role="button" data-slide="prev"><span class="glyphicon glyphicon-chevron-left"></span></a>
          <a class="right carousel-control" href="#thumbnail-preview-indicators" role="button" data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span></a>
      </div> 
      
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

4
  • Estoy viendo la ejecución de snippet y yo veo los elementos centrados Commented el 28 nov. 2017 a las 19:27
  • ¿lo que quieres es alinear el titulo y la descripción, a la izquierda como la imagen? por que el ejemplo tiene el texto centrado
    – Michael
    Commented el 28 nov. 2017 a las 19:32
  • exactamente!!! La idea es hacerlo igual al ejemplo de la imagen que adjunte, yo tome como base el codigo adjunto para poder hacerlo,. pero el ejemplo de carousel ese tiene unos container que no estan haciendo caso @maikolsolanopatiño
    – MarianoF
    Commented el 28 nov. 2017 a las 19:56
  • En realidad lo que queri es que el contenido quede dentro de la grilla de los 1170px y que pueda adaparle dos columnas con bootstrap, pero no se si puede hacer.
    – MarianoF
    Commented el 28 nov. 2017 a las 20:11

1 respuesta 1

0

Puedes probar con esta estructura, en las columnas puedes usar la clase text-left para alinear el contenido

/*
-----------------------------------
    Code snippet by @maridlcrmn
    Credits images: www.unsplash.com
-----------------------------------
*/

#thumbnail-preview-indicators {
  position: relative;
  overflow: hidden;
}

#thumbnail-preview-indicators .slides .slide-1,
#thumbnail-preview-indicators .slides .slide-2,
#thumbnail-preview-indicators .slides .slide-3 {
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}

#thumbnail-preview-indicators,
#thumbnail-preview-indicators .slides,
#thumbnail-preview-indicators .slides .slide-1,
#thumbnail-preview-indicators .slides .slide-2,
#thumbnail-preview-indicators .slides .slide-3 {
  height: 480px;
}

#thumbnail-preview-indicators .slides .slide-1 {
  background-image: url(https://s3.amazonaws.com/ooomf-com-files/wdXqHcTwSTmLuKOGz92L_Landscape.jpg);
}

#thumbnail-preview-indicators .slides .slide-2 {
  background-image: url(https://s3.amazonaws.com/ooomf-com-files/tU3ptNgGSP6U2fE67Gvy_SYDNEY-162.jpg);
}

#thumbnail-preview-indicators .slides .slide-3 {
  background-image: url(https://s3.amazonaws.com/ooomf-com-files/mtNrf7oxS4uSxTzMBWfQ_DSC_0043.jpg);
}

#thumbnail-preview-indicators .carousel-inner .item .carousel-caption {
  top: 20%;
  bottom: inherit;
    width: 1170px; /*modificado*/
    right: auto; /*modificado*/
    left: auto; /*modificado*/
    background: blue; /*modificado*/
}

#thumbnail-preview-indicators .carousel-indicators li,
#thumbnail-preview-indicators .carousel-indicators li.active {
  position: relative;
  width: 100px;
  height: 8px;
}

#thumbnail-preview-indicators .carousel-indicators li>.thumbnail {
  position: absolute;
  top: 0;
  width: 100px;
  display: none;
  opacity: 0;
  left: 50%;
  margin-top: -80px;
  margin-left: -50px;
}

#thumbnail-preview-indicators .carousel-indicators li:hover>.thumbnail,
#thumbnail-preview-indicators .carousel-indicators li.active>.thumbnail {
  display: block;
  opacity: .8;
}

#thumbnail-preview-indicators .carousel-indicators li.active>.thumbnail:hover {
  opacity: 1;
}

@media screen and (max-width: 480px) {
  #thumbnail-preview-indicators .carousel-indicators li,
  #thumbnail-preview-indicators .carousel-indicators li.active {
    width: 50px;
    height: 8px;
    position: relative;
  }
  #thumbnail-preview-indicators .carousel-indicators li>.thumbnail {
    width: 50px;
    left: 50%;
    margin-top: -50px;
    margin-left: -25px;
  }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>



<div id="thumbnail-preview-indicators" class="carousel slide" data-ride="carousel">
  <!-- Indicators -->
  <ol class="carousel-indicators">
    <li data-target="#thumbnail-preview-indicators" data-slide-to="0" class="active">
      <div class="thumbnail">
        <img class="img-responsive" src="https://s3.amazonaws.com/ooomf-com-files/wdXqHcTwSTmLuKOGz92L_Landscape.jpg">
      </div>
    </li>
  </ol>
  <div class="carousel-inner">
    <div class="item slides active">
      <div class="slide-1"></div>
      <div class="container">
        <div class="carousel-caption">
          <!--COLUMNA #1 con class "text-left"-->
          <div class="col-xs-6 text-left">
            <h1>DATE EL GUSTO, col#1</h1>
            <span class="title-rotador">sin Gluten.</span>
            <br>
            <a class="btn btn-lg btn-primary" href="#" role="button">Learn more</a>
          </div>
          <!--COLUMNA #2 con class "text-left"-->
          <div class="col-xs-6 text-left">
            <h1>DATE EL GUSTO, col#2</h1>
            <span class="title-rotador">sin Gluten.</span>
            <br>
            <a class="btn btn-lg btn-primary" href="#" role="button">Learn more</a>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

10
  • En realidad lo que queria es que el contenido quede dentro de la grilla de los 1170px y que pueda adaptarle dos columnas con bootstrap, pero no se si puede hacer. @maikolsolanopatiño
    – MarianoF
    Commented el 29 nov. 2017 a las 12:54
  • a que elemento se refiere con "grilla de los 1170px"?
    – Michael
    Commented el 29 nov. 2017 a las 13:39
  • Yo lo que necesito es como el ejemplo de la foto que adjunte, que el contenido del carousel este dentro del container y que abarque los 1170 px del container de bootstrap y se logre adaptar en los mediaqueries tambien, en ese ejemplo que adjunto existen unos container pero no los esta respetando el contenido pareciera que esta flotando. se comprende lo que digo?
    – MarianoF
    Commented el 29 nov. 2017 a las 14:18
  • La verdad aun no entiendo que es lo que quiere, acabo de modificar el código, en css puse comentarios '/*modificado*/' que son los que cambie para que ocupe el 100% del ancho del contenedor, ya solo es que std cambie el css de cada columna a su gusto, y los posicione como la imagen de ejemplo que puso....
    – Michael
    Commented el 29 nov. 2017 a las 14:35
  • ahh no lo había visto, perdon!
    – MarianoF
    Commented el 29 nov. 2017 a las 14:59

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.