Creando un carousel de imágenes

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

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">```

Para quienes no le funcione el data-pause=“false” en bootstrap 5 se tiene que agregar un bs abajo un ejemplo.
<div id=“carouselExampleFade” class=“carousel slide carousel-fade” data-bs-ride=“carousel” data-bs-pause=“false”>

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;
}```

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

• Estoy construyendo el sitio enfocado a un viaje espacial

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!

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

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

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

GitHub Platzi@Bootstrap-Course

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

enlace de la documentación

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

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

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

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

Antes de agregar el SRC en las imágenes o mas bien dentro de ellas, colocar un . antes de la ruta
Ejemplo:

<img src="./img/img_ejemplo.png" alt="Algo"> 

Esto con el fin de cuando hagan deploy de su proyecto en un server, la ruta no se “rompa” y les carguen las imágenes siempre.

Pueden leer mas de las rutas relativas, aqui: Rutas Relativas

No funcionaban los slides en Bootstrap 5. La solución es poner :

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf"crossorigin="anonymous"></script>

Apuntes:
Para crear un carrusel de imágenes a traves de Bootstrap, podemos irnos a la documentación, a traves del link: https://getbootstrap.com/docs/4.1/components/carousel/
object-fit: Es una propiedad CSS que nos permite adaptar el ancho y alto de un elemento (como imagen por ejemplo) dependiendo del tamaño del contenedor. El valor por defecto es “fill” y puede tomar el valor de “cover”.
data-pause=”false”
Es un atributo que podemos asignar dentro de la etiqueta de inicio del carrusel, para evitar que las imágenes se pausen mietras hacemos hover con el mouse.

https://github.com/platzi/bootstrap

Me encanta !!!

Bootstrap +2

La verdad que despues de estar toda la noche toqueteando he de decir que cuando le coges el truco y te aprendes las clases de bootstrap mas importantes se hace todo sobre la marcha. 😃

con bootstrap me parece todo genial

Muchas gracias, me parece mucho más fácil que armar de cero.

Comienzo a amar bootstrap

en boostrap 5 para evitar que se pause el slider tenemos que poner data-bs-pause=“false”

en lugar de data-pause

PARA BOOTSTRAP 5, CAMBIA:

<div id="carouselExampleFade" class="carousel slide carousel-fade" data-bs-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="..." class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
      <img src="..." class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
      <img src="..." class="d-block w-100" alt="...">
    </div>
  </div>
  <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleFade" data-bs-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Previous</span>
  </button>
  <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleFade" data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Next</span>
  </button>
</div>

Debajo adjunto mi código, en el cual no se por cual razón nada más se me muestra la primera imagen, dice ser algo de Bootstrap 5 y el curso usamos la versión 4

<section id="main">
      <div id="carouselExampleControls" class="carousel slide" data-ride="carousel" data-pause ="false">
        <div class="carousel-inner">
          <div class="carousel-item active">
            <img class="d-block w-100" src="assets/images/puntacana.jpg" alt="First slide">
          </div>
          <div class="carousel-item">
            <img class="d-block w-100" src="assets/images/puntacana2.jpg" alt="Second slide">
          </div>
          <div class="carousel-item">
            <img class="d-block w-100" src="assets/images/puntacana3.jpg" alt="Third slide">
          </div>
        </div>
      </div>
    </section>

Antes de seguir avanzando, que puedo hacer si los slides no se mueven

<!--main-->

        <div id="carouselExampleFade" class="carousel slide carousel-fade" data-bs-ride="carousel">
            <div class="carousel-inner">
              <div class="carousel-item active">
                <img src="./hawaii.jpg" class="d-block w-100" alt="hawaii1">
              </div>
              <div class="carousel-item">
                <img src="./hawaii2.jpg" class="d-block w-100" alt="hawaii2">
              </div>
              <div class="carousel-item">
                <img src="./hawaii3.jpeg" class="d-block w-100" alt="hawaii3">
              </div>
            </div>
            <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleFade" data-bs-slide="prev">
              <span class="carousel-control-prev-icon" aria-hidden="true"></span>
              <span class="visually-hidden">Previous</span>
            </button>
            <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleFade" data-bs-slide="next">
              <span class="carousel-control-next-icon" aria-hidden="true"></span>
              <span class="visually-hidden">Next</span>
            </button>
        </div>
        <!--/main-->

object-fit
La propiedad CSS object-fit indica cómo el contenido de un elemento reemplazado, por ejemplo un <img> o <video>, debería redimensionarse para ajustarse a su contenedor.

Se puede alterar la alineación del contenido del elemento reemplazado utilizando la propiedad object-position.

object-fit: fill;

object-fit: contain;

object-fit: cover;

object-fit: none;

object-fit: scale-down;

es super facil hacer el carousel con bootstrap, yo hice uno con css solo y fue todo un show

Hola! Yo estuve un rato atorado en la parte donde se muestra el texto en el overlay del carousel de imágenes del header (no me mostraba). Después de un rato, vi que no tenia ningún error, al parecer es la versión de bootstrap.
En el html del profe (que se encuentra en git) utiliza la versión 4.1.3, y yo estoy utilizando la ultima disponible de la versión 4, que es la 4.6.0

que funcion cumple esto img class=“d-block w-100”

Como se podria realizar con gifts ? en cada carrusel ?

poca gente comenta esta clase. xD

No me funcionan las animaciones del Bootstrap, osea las transiciones las hace de golpe. alguna solución?

Me encanto la propiedad CSS filter no conocía sobre esta, cada día se aprende algo nuevo.

que curso tan genial.

Genial, perfecto para Backends!

Genial va quedando muy bien

Gracias Sacha por explicar tan detalladamente se entiende muy bien! veo que para trabajar con Bootstrap tienes que tener a la mano la documentación para aprovechar al máximo las herramientas que ofrece

con unas cuantas lineas de codigo que nos has compartido he logrado resolver algo que me la habia pasado preguntando en toda la web y no lo encontraba, yo hice un slider (carousel bootstrap) y poniendo imagenes directas desde mi computadora a un tama;o especifico, todo estaba bien pero cuando las imagenes las queria obtener directamente de otra fuente en la web, es decir traerlas a mi web desde facebook por ejemplo, tomaban el tama;o de la imagen de face y yo queria enmascarala para que solo apareciera una parte de la imagen y eso lo pudel lograr ahorita al ver como lo hiciste con css: #main .carousel-inner img {
max-height: 70vh;
object-fit: cover;
}

muchas gracias, eres el mejor

bootstrap es lo maximo!!

Como puedo cambiar el controlador de abajo?. que no sean rayas, por ejemplo quiero poner una palabra y que cada letra sea una imagen.

El codigo del controlador es el siguiente. Ayuda!!!

  <ol class="carousel-indicators">
          <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
          <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
          <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
          <li data-target="#carouselExampleIndicators" data-slide-to="3"></li>
          <li data-target="#carouselExampleIndicators" data-slide-to="4"  ></li>
        </ol>```

Para los que no les funciona el fade en la version 5.1, en el css poner:

.carousel.carousel-fade .carousel-item {
    display: block;
    opacity: 0;
    transition: opacity ease-out .7s;
}

.carousel.carousel-fade .carousel-item.active {
    opacity: 1 !important;
}

Este curso es una maravilla

Sección de Carousel agregada al proyecto 🙌🏻
Código en GitHub: https://github.com/iJCode1/bootstrap4_platzi
.
Resultado:

No se por cual motivo, pero pasar la información del carousel por atributos en vez de por JS hizo que funcionara el deshabilitar la pausa para cambiar de slide.
Doc: https://getbootstrap.com/docs/5.0/components/carousel/#options

Mi flujo de trabajo para este tipo de webs tiene una tendencia a aumentar enrome con Bootstrap

7:47: alv lo dejo para el siguiente video xd

Alguien que me pueda dar un ejemplo de como cambiar la velocidad de transaccional de las imágenes, por favor.

Nananana clave como se va viendo el sitio

Me parece que es necesario agregar un min-height porque cuando ponemos la pantalla a dispostivos pequeños el slide es irregular y puede cambiar de alturas

Se corta en este punto :S

excelente clase!!!

Muy buena explicación.

Genial!

Super, buena clase!!

Super!!

Genial!

Qué diferencias prácticas hay entre <section> <main>?

Una maravilla descubrir “Bootstrap”, junto a “Css Grid”.

al quitarle los controles no me realiza la transición de las imágenes,

Alguien sabe como puedo solucionarlo?

tambien tengo problemas con algunas de mis imagenes ya que en lugar de ajustarlas al 70% de la pantalla solo las corta. Como puedo solucionar esto?

Hay un bug o error, donde se supone que deberían estar los assets, es decir, en la pestaña de recursos, hay marcadores. Y los recursos no están en ninguna clase del curso.

Y continuara…

Está muy genial 😄

Muy buena practica!

Por alguna extraña razón, no me sale el texto frente a las imágenes, sino ENTRE LAS IMÁGENES…
Alguien tiene alguna sugerencia, dejo mi código por si alguien ve algún error. Ya lo intenté y nelson 😦

 <main id="main">
        <div id="carousel" class="carousel slide carousel-fade" data-ride="carousel" data-pause="false">
            <div class="carousel-inner">
                <div class="carousel-item active">
                    <img class="d-block w-100" src="images/main1.JPG" alt="First slide" id="imagen1">
                </div>
                <div class="carousel-item">
                    <img class="d-block w-100" src="images/main2.JPG" alt="First slide" id="imagen1">
                </div>
                <div class="carousel-item">
                    <img class="d-block w-100" src="images/main3.JPG" alt="First slide" id="imagen1">
                </div>
                <div class="overlay">
                    <div class="container">
                        <div class="row">
                            <div class="col">
                                <h1>Vive la experiencia Anglo</h1>
                                <p>Los retos los pone la vida, las herramientas nosotros</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div> 
    </main>```

Genial, me esta encantando bootstrap, yo estoy enfocado en el backend y esto me va a facilitar mucho la vida a la hora de crear guis.

Infinidad de herramientas!

Bootstrap tiene muchas opciones, toca empezar a hacer paginas para aprender todo lo que permite. La documentación oficial es genial.

sacha el mejor!

Excelente tutorial

en bootstrap solo hace falta ser un “científico” y estar experimentando con todo lo q nos ofrece la documentación, se pueden conseguir sitios super buenos !!

Interesante las 5 clases de object-fit.

las imagenes de hawaii

Se que existen otros frimework pero la facilidad con que bootstrap hace las cosas es asombrosa, con html y css puro me costo tiempo y esfuerzo, sin embargo veo la importancia de saber las bases de un fronted.

Excelente Platzi.

feliz de haberme animado a este curso!!!

Con la versión 4.6 de bootstrap el overlay lo toma como si fuera una imagen, se. muestra cada cierto tiempo. Hay alguna manera de resolver este comportamiento y quede fijo con lo muestra el profesor en el video?

Gente consuta, les paso con la v5 de bootstrap el menu no lo pudieron poner a la derecha? xq busque soluciones y nada… mi ul hoy en dia tiene estos elementos

<ul class="navbar-nav me-auto mb-2 mb-lg-0```

https://twitter.com/mangelrogel
El profesor se parece mucho

Genial ese carousel!!

Mis imágenes no tienen ese efecto de transición suave. Simplemente una reemplaza a la otra. Es como muy brusco. Como soluciono eso?

existen las etiquetas <main></main> es mas apropiado que las section