You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
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, como info-cards e incluso flex-layouts, 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:
En esta actividad, crearemos un slider de marcas para nuestro sitio web:
En el archivo home.jsonc, declare el bloque slider-layout#home al template store.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 de slider-layout#home y agregue 6 componentes de imagenimage como children. Utilice el formato image#brand1, image#brand2 (...) image#brand6 para declarar los componentes.
Declare una prop src específica para cada image#brand definido. Utilice las siguientes URLs para cada una:
Por último, usted debe utilizar la propriedad de autoplay en el bloque slider-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.
ℹ️ Recuerde acceder a la documentación del Slider Layout e Image si tiene alguna duda durante la actividad.
The text was updated successfully, but these errors were encountered:
Carrusel de bloques
✨ Branch: slider
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.ℹ️ Recuerde acceder a la documentación del Slider Layout e Image si tiene alguna duda durante la actividad.
The text was updated successfully, but these errors were encountered: