Creando un carousel de imágenes

Contenido del curso

Introducción al curso

Creando el sitio web

Deploy a producción

Resumen

El carousel nos permite ver un conjunto de imágenes y mostrarlas de manera automática. Encuentra más información en https://getbootstrap.com/docs/4.1/components/carousel/

Comentarios

Alberto Castro Flores

student•

para booststrap v5 se cancela la pausa con el hover en la imagen con la siguiente clase: data-bs-pause="false"

Kevin FG

student•

crack!

Uriel Moreno Lopez

student•

Muchas gracias.

Fernando Galdós

student•

En Bootstrp 5.0 el codigo cambia un poco y deben tener en cuenta que la primera linea es asi, caso contrario no correra el carrusel

<div id="carouselExampleFade" class="carousel slide carousel-fade" data-bs-ride="carousel">```

Benjamín Ezequiel Mármol Maldonado

student•

Muchas gracias pibe, justo lo que necesitaba

Alex hernandez mitre

student•

the best aporte ever

Bóris González

student•

Para quienes no le funcione el data-pause="false" en bootstrap 5 se tiene que agregar un bs abajo un ejemplo.

Armando Leyva Pacheco

student•

Buen aporte.

Cesar jose Sulbaran González

student•

muchas gracias

Jhon Carlos Colorado Angulo

student•

Hasta el momento muy contento con el curso. Pensaba que bootstrap era más complejo.

Harold David Avila Sabogal

student•

muy buen curso

Edgardo Marcano

student•

Es lo maximo, me agrada el profesor. Directo al grano.

Iván Toro

student•

Imagenes

Jose L. Figueroa

student•

Gracias @ivanmtoroc ya las integré al proy!! ;D

German Cavani

student•

Gracias buen hombre. Se ganó un corazón.

Santiago Gomez Florez

student•

Para quienes les aparezcan las imagenes de golpe deben agregar esta propiedad dentro de la clase carousel-item

.carousel-item {
    transition: transform 1s ease, opacity .5s ease-out;
}```

Daniel Acevedo

student•

Gracias, es lo que me faltaba

Javier Alejandro Alamar Martínez

student•

¿Cuál es mejor práctica, usar id, o usar clases? Esto para CSS

Marco Melendez

student•

clases, ya que estas pueden ser varias mientras que un id es unico no lo pueden tener mas objetos en tu codigo y asi dejas los id para practicar javascript

Manuel Ojeda

student•

La regla más importante a la hora de elegir entre clases e ID’s es que un ID sólo debe ser usado una vez en el documento.

Además las ID's tienen más peso dentro de CSS,por ejemplo, si tenemos el siguiente código

#un_id {
	color: '#95ca3e'
}

.una_clase {
	color: '#1e3744'
}

<p class="una_clase" id="un_id">Nunca pares de aprender</p>

El tag <p> en automático tomara el color del #un_id pues tiene más peso dentro de los estilos y te puede sobre escribir los estilos de la clase.

Se recomienda utilizar clases para lo que es CSS.

Yeferson Yuberley Guerrero Castro

student•

Estoy construyendo el sitio enfocado a un viaje espacial

Julian David Alzate Cuervo

student•

se ve genial

Alvaro Legarda

student•

Hoy he estado haciendo mi primera landing page, con responsive design, intenté que el alto de la imagen fuera siempre del alto del tamaño de la ventana, hasta que dije, voy a ir "de la mano" con el curso de bootstrap y seguro encuentro la manera de lograrlo. De pronto el profesor introduce el max-height y explica lo que hace. Volví al código de mi landing page...solucionado!

Gonzalo Pozzoli

student•

Esto son los efectos que le pueden poner a las imágenes ademas de greyscale

filter: url("filters.svg#filter-id");
filter: blur(5px);
filter: brightness(0.4);
filter: contrast(200%);
filter: drop-shadow(16px 16px 20px blue);
filter: grayscale(50%);
filter: hue-rotate(90deg);
filter: invert(75%);
filter: opacity(25%);
filter: saturate(30%);
filter: sepia(60%);```

También pueden combinarlos

Juan C Felizzola

student•

Las imagenes aún no están en la parte de archivos, les recomiento que descarguen el proyecto del repositorio y copien la carpeta assets en su proyecto:

Jose Colmenares

student•

Me acabo de dar cuenta que si elimino los controles los slides se empiezan a pasar automáticamente. Esto es asi?

Facundo Nicolás García Martoni

teacher•

Es así ;)

Johan Manuel Perez Soto

student•

He aqui el link del repo para que busquen las imagenes...

GitHub Platzi@Bootstrap-Course

Daniel Ruiz

student•

cuando hago click a los controles no cambia de slide, a que se debe?

Alex Camacho

teacher•

¿Agregaste el código de jQuery o JavaScript propio de Bootstrap para esta funcionalidad?

Los componentes de Bootstrap como lo es el carousel necesitan del código JS descrito en su documentación para funcionar.

Daniel Ruiz

student•

cloné el repositorio de la clase anterior, trae varios scripts no se si le falta alguno, sera que la clase es antigua y actualizaron el link del script o algo asi?

Christian David Sánchez

student•

Apuntes La propiedad filter: grayscale(70%); le quita color La propiedad max-height: 70vh; porcentaje ocupado en la pantalla La propiedad object-fit: cover; auto ajusta la imagen

Alexander Valencia

student•

enlace de la documentación

https://getbootstrap.com/docs/4.1/components/carousel/

Giovanny Varón

student•

Tengo un problema. en el slide no me aparecen los controles y ademas solo sale la primera imagen 😐

Francisco Vicher

student•

Revisa que tengas declaradas correctamente las clases, los contenedores que se deslizan deben tener la clase “item”, al menos a mi me pasó la primera vez que use el carousel de bootstrap, de cualquier forma sería bueno que incluyeras tu código para ver mejor en qué consiste el problema.

Jose Brantes Rodriguez

student•

si puedes poner el código podría ayudar

Jorge Luis Martínez Hernández

student•

en bootstap 5 para que no se pause el carrusel se agrega el atributo data-bs-pause="false"

Jefferson Andres Espejo Goez

student•

Maquetar con bootstrap es relativamente fácil luego de familiarizarse con las clases, hay que explorar más el css

Carlos Alberto De Avila Suro

student•

Use el atributo data-pause="false" para no pausar el carrusel con el over del mouse, pero no me funciona. Aqui mi linea por si alguien pudiera ayudarme

Alexander Nova Arevalo

student•

Verifica que el jquery este es tus scripts y pooperjs too

Carlos Alberto De Avila Suro

student•

Muchas gracias por responder #alexsk88nova, ya lo hice pero sigue sin funcionar

filter: url("filters.svg#filter-id");
filter: blur(5px);
filter: brightness(0.4);
filter: contrast(200%);
filter: drop-shadow(16px 16px 20px blue);
filter: grayscale(50%);
filter: hue-rotate(90deg);
filter: invert(75%);
filter: opacity(25%);
filter: saturate(30%);
filter: sepia(60%);```

También pueden combinarlos

Creando un carousel de imágenes

Introducción al curso

Repositorio del curso de bootstrap

Bootstrap 4 ¿Qué trae de nuevo esta versión?

¿Que es un framework de frontend?

Nuestro Proyecto: Hola Mundo de Bootstrap

Creando el sitio web

La grilla de Bootstrap

Reto: La grilla de Bootstrap

El footer

El header de nuestro sitio

Creando un carousel de imágenes

Agregando texto informativo del evento

Agregando botones

Las cards de Bootstrap 4

Pastillas de texto

Agregando un contenedor de ancho completo

Los formularios de Bootstrap 4

Agregando un tooltip

Scrollspy: Conociendo la ubicación del usuario en el header

Agregando un modal para comprar tickets

Un nuevo formulario para completar la compra

Deploy a producción

Poniendo nuestro sitio en producción

Conclusiones del curso