Carousel con Bootstrap

Clase 31 de 45 • Curso de Frontend con Bootstrap y Foundation 2016

Resumen

Vamos a crear un carousel de imágenes con Bootstrap

Geraldyn Daniela Chirinos De Sousa

student•

escribiendo directamente la palabra lorem en sublime text y presionando luego tab, automáticamente genera un párrafo de relleno!! 😄

Centro Cultural Colombo Americano

student•

El problema del slider es que como esta soportado para la version 4.0.0-alpha.6 y nosotros descargamos un archivo X que nos suministraron entonces entran en conflico con el slider porque son versiones diferentes, me parece que esta desactualizado deberian renovarlo. porque con la version que nombre anteriormente la forma de usar flex es totalmente diferente …

Cesar David Ramírez Dimaté

student•

Por eso mismo lo harán jajaja.

Javier Eduardo Perez Carreño

student•

En la versión v4.0.0-alpha.6 no aparece el sombreado del Background. Dejo el CSS para el que le gustaría tenerlo

#productosCarousel{
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#000000+26,000000+47,000000+58,000000+58,000000+65,000000+65,000000+67,000000+71&0+47,0.65+100 */
background: -moz-radial-gradient(center, ellipse cover, rgba(0,0,0,0) 26%, rgba(0,0,0,0) 47%, rgba(0,0,0,0.13) 58%, rgba(0,0,0,0.22) 65%, rgba(0,0,0,0.24) 67%, rgba(0,0,0,0.29) 71%, rgba(0,0,0,0.65) 100%); /* FF3.6-15 */
background: -webkit-radial-gradient(center, ellipse cover, rgba(0,0,0,0) 26%,rgba(0,0,0,0) 47%,rgba(0,0,0,0.13) 58%,rgba(0,0,0,0.22) 65%,rgba(0,0,0,0.24) 67%,rgba(0,0,0,0.29) 71%,rgba(0,0,0,0.65) 100%); /* Chrome10-25,Safari5.1-6 */
background: radial-gradient(ellipse at center, rgba(0,0,0,0) 26%,rgba(0,0,0,0) 47%,rgba(0,0,0,0.13) 58%,rgba(0,0,0,0.22) 65%,rgba(0,0,0,0.24) 67%,rgba(0,0,0,0.29) 71%,rgba(0,0,0,0.65) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#a6000000',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}

OSCAR ANDRES TREJO NARVAEZ

student•

NO LE APARECE LAS FLECHAS? Solo hay que cambiar algo simple

La ultima version viene asi (esta es la parte de las flechas)

<a class=“**carousel-control-prev**” href="#carouselExampleIndicators" role=“button” data-slide=“prev”> Previous </a> <a class=“**carousel-control-next**” href="#carouselExampleIndicators" role=“button” data-slide=“next”> Next </a> lo que esta en negrita se cambia por class="left carousel-control" class="right carousel-control" respectivamente y en las etiquetas se aumenta lo siguiente icon-prev icon-next

Francisco Manuel Velásquez Escobar

student•

Para centrar la imagen en el carousel en “alpha 6” deben hacerlo con la clase mx-auto en la etiqueta img.

Victoria Fernandez

student•

Como hago si yo quiero que los carrousel-indicators no sean bullets sino otra cosa, por ejemplo que dada uno sea un icono o un numero…?

Lina Pacheco

student•

Vicky hola! Puedes sobrescribir la clase carousel-indicators o crear una clase y la añades al contenedor, aquí te dejo un ejemplo: https://codepen.io/danbhala/pen/gpWvxG

Victoria Fernandez

student•

Perfecto! mil gracias por tu respuesta 😃

Luis Felipe Silgado Cortázar

student•

a alguien más le pasa que el texto se le riega por fuera de la imagen?

Ismael Teixeira

student•

Hola! puedes colocar el codigo para ayudarte??

Luis Felipe Silgado Cortázar

student•

Es el mismo que el del curso, a Sacha también le pasa, tal cual.

Sebastian Vasquez Rodriguez

student•

Un caos con las distintas versiones.
No se si es lo óptimo, pero busque una forma para que se viese bien.
Al slider le puse una clase y ajuste las imágenes.

.imgArreglo{
        margin: auto;
        height: 100%;
        width: 100%;
        -webkit-filter: sepia(1); /* 1 = 100% */ filter: sepia(1);
}

Sebastian Vasquez Rodriguez

student•

a las img del slider.

Luis Felipe Silgado Cortázar

student•

Se ve bien, yo lo compro…

Cesar David Ramírez Dimaté

student•

Acá dejo el código para la versión 4.1.1, sin necesidad de modificar nada en el css.

<!-- Carousel -->
<div id="carousel-container">
  <div id="productosCarousel" class="carousel slide" data-ride="carousel">
    <ol class="carousel-indicators">
      <li data-target="#productosCarousel" data-slide-to="0" class="active"></li>
      <li data-target="#productosCarousel" data-slide-to="1"></li>
      <li data-target="#productosCarousel" data-slide-to="2"></li>
    </ol>
    <div class="carousel-inner">
      <div class="carousel-item active">
        <img class="d-block w-100" src="images/producto-1.svg" alt="Primer Producto">
        <div class="carousel-caption">
          <h5>Producto 1</h5>
          <p class="d-none d-md-block">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi inventore, assumenda consectetur nemo nihil unde quasi? Rerum doloremque voluptatibus, debitis facilis possimus totam sit obcaecati cumque atque rem! Illo, veniam.</p>
        </div>
      </div>
      <div class="carousel-item">
        <img class="d-block w-100" src="images/producto-2.svg" alt="Segundo Producto">
        <div class="carousel-caption">
          <h5>Producto 2</h5>
          <p class="d-none d-md-block">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente laborum unde eveniet porro, excepturi, enim architecto nulla voluptatibus molestiae facilis! Debitis earum a commodi ex voluptas explicabo dicta facere ratione.</p>
        </div>
      </div>
      <div class="carousel-item">
        <img class="d-block w-100" src="images/producto-3.svg" alt="Tercer Proucto">
        <div class="carousel-caption">
          <h5>Producto 3</h5>
          <p class="d-none d-md-block">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vel nihil mollitia molestias tempore magnam sequi saepe perferendis adipisci facilis nostrum quo vitae cum ea, facere consequatur hic quam modi alias.</p>
        </div>
      </div>
    </div>
    <a class="carousel-control-prev" href="#productosCarousel" role="button" data-slide="prev">
      <span class="carousel-control-prev-icon" aria-hidden="true"></span>
      <span class="sr-only">Producto anterior</span>
    </a>
    <a class="carousel-control-next" href="#productosCarousel" role="button" data-slide="next">
      <span class="carousel-control-next-icon" aria-hidden="true"></span>
      <span class="sr-only">Producto siguiente</span> <!-- sr-only:-> clase utilizada para videntes, en este caso, escuchar lo que dice -->
    </a>
  </div>
</div>
<!-- /Carousel -->

Rafael Francisco Mollá Douglas

student•

Hola, tengo dos imágenes en un carousel con un alto definido de 400px cada una y un ancho de 100%. Las imágenes se ven un poco distorsionadas. Quiero que las dos imágenes ocupen el 100% del elemento que las contiene pero quiero modificarles el alto sin que se vean distorsionadas. ¿Cómo puedo hacer esto?

Geraldyn Daniela Chirinos De Sousa

student•

cambiale el alto de todos los ascendientes de la imagen y ponlas al 100% del alto… no solo basta con cambiar el alto del contenedor principal y de la imagen, sino que hay que cambiar el alto de todos los contenedores que esten entre el principal y la imagen… si me explico? 😄

Greivin Chaves Ramos

student•

Con que librería podría trabajar lo que se menciono en el vídeo para cambiar imágenes de distintas resoluciones dependiendo del tamaño de la pantalla ?

Yeison Daza

student•

Actualmente se trabaja en una implantación de la etiqueta <picture> que hará esto de forma nativa https://www.html5rocks.com/en/tutorials/responsive/picture-element/

Jorge Díaz Hernández

student•

Está fallando mucho el vídeo 😦

Ricardo Azpeitia P.

student•

Cuando pase eso prueba con el servidor alterno, usualmente el B

Daniel Barroso BARROSO

student•

a alguien mas le pasa esto? no me aparecen las flechas de anterior y siguiente y los bullet no se acomodan al centro

Yeison Daza

student•

Comparte tú código porfa para ver si existe un typo

Centro Cultural Colombo Americano

student•

Me pasa exactamente lo mismo el code esta igual que el del profe …

Elias Lorente

student•

a mi no me salen las flechitas a los lados del carousel, alguien sabe por que?

Diego Forero

Team Platzi•

Puede que hayan cambiado las clases css para mostrar las flechas, revisa la documentación oficial, cuando se hizo este curso bootstrap estaba en versión alpha.

Carousel con Bootstrap

¡Hemos renovado este curso!

¿Dónde aprender frontend actualizado?

Bienvenido al curso

Bienvenidos al curso de frontend con Bootstrap y Foundation

Introducción a Frameworks Frontend

Foundation

Presentación del proyecto para Foundation

Grilla de Foundation

Grilla Flex de Foundation

Foundation Icon Fonts 3

Títulos en Foundation

Barra de menú en Foundation

Botones en Foundation

Tabs con Foundation

Carrousel en Foundation con Orbit

Tablas de precio con Foundation

Igualar alto de columnas en Foundation

Contenido responsive con Foundation

Formularios con Foundation

Validación de formularios con Foundation

Navegación avanzada con Foundation

Barra de navegación fija con Foundation

Modificando Tabs en Foundation

Menú offcanvas con Foundation

Menú Drilldown con Foundation

Obteniendo datos del formulario

Bootstrap

Presentación del proyecto de Bootstrap

Bootstrap lanzó su versión v4.0.0-alpha.6

Contenedores en Bootstrap

Grillas en Bootstrap

Grillas Flex con Bootstrap

Barra de navegación con Bootstrap

Navegación responsive con Bootstrap

Carousel con Bootstrap

Imágenes responsivas con Bootstrap

Formularios con Bootstrap

Modals en Bootstrap

Breadcrumbs con Bootstrap

Filtros con Bootstrap

Cards con Bootstrap

Conclusiones

Cierre del Curso

Desafío 01

Desafío 02

Desafío 03

Desafío 04

Contenido complementario

Personalizando Bootstrap

Zurb Development Stack

Yeoman