Open github-learning-lab[bot] opened 4 years ago
:white_check_mark::x::x::white_check_mark:
:white_check_mark: Add a slider-layout#home block to your home :x: Did not find expected images in your slider-layout :x: Could not find images with a src prop :white_check_mark: Make slider-layout have autoplay behavior but stop playing when the user hovers over an image
:white_check_mark::white_check_mark::x::white_check_mark:
:white_check_mark: Add a slider-layout#home block to your home :white_check_mark: Make slider-layout have 6 brand images as children :x: Could not find images with a src prop :white_check_mark: Make slider-layout have autoplay behavior but stop playing when the user hovers over an image
:white_check_mark::white_check_mark::white_check_mark::white_check_mark:
:white_check_mark: Add a slider-layout#home block to your home :white_check_mark: Make slider-layout have 6 brand images as children :white_check_mark: Add correct image src to each image block :white_check_mark: Make slider-layout have autoplay behavior but stop playing when the user hovers over an image
Carrusel de bloques
:sparkles: Branch: slider-layout
Introducción
Slider Layout, como Flex Layout, es una forma flexible de crear un nuevo bloque a partir de otros bloques usando
children
. Este permite que se creen sliders de otros bloques, comoinfo-card
s e inclusoflex-layout
s, por ejemplo.Utilizaremos Slider Layout para convertir un conjunto de info-cards en un slider.
Slider Layout
Analizando la documentación, vemos que usted puede utilizar cualquier array de bloques como
children
, así como en el Flex Layout.A continuación, sigue un ejemplo de implementación de un slider-layout con dos
info-card
:Actividad
En esta actividad, crearemos un slider de marcas para nuestro sitio web:
En el archivo
home.jsonc
, declare el bloqueslider-layout#home
al templatestore.home
.Cree un archivo llamado
slider-layout.jsonc
dentro de la carpeta/store/blocks
.En este archivo, basado en el código anterior, reemplace los
info-card
declarados como children deslider-layout#home
y agregue 6 componentes de imagenimage
como children. Utilice el formatoimage#brand1
,image#brand2
(...)image#brand6
para declarar los componentes.Declare una prop
src
específica para cadaimage#brand
definido. Utilice las siguientes URLs para cada una:https://appliancetheme.vteximg.com.br/arquivos/flatflat-brand-logo-square1.png
https://appliancetheme.vteximg.com.br/arquivos/flatflat-brand-logo-square2.png
https://appliancetheme.vteximg.com.br/arquivos/flatflat-brand-logo-square3.png
https://appliancetheme.vteximg.com.br/arquivos/flatflat-brand-logo-square4.png
https://appliancetheme.vteximg.com.br/arquivos/flatflat-brand-logo-square5.png
https://appliancetheme.vteximg.com.br/arquivos/flatflat-brand-logo-square6.png
Por último, usted debe utilizar la propriedad de
autoplay
en el bloqueslider-layout#home
. Haga que el slide cambie automáticamente cada 7 segundos y que se detenga cuando el usuario pase el mouse encima del slide.:information_source: Recuerde acceder a la documentación del Slider Layout e Image si tiene alguna duda durante la actividad.
:no_entry_sign: ¿Perdido?
¿Hay algún problema con este paso? ¿Qué tal si nos envía un feedback? :pray:
Crear feedback
Si aún tiene alguna duda sobre cómo enviar su respuesta, puede revisar aquí.