Closed github-learning-lab[bot] closed 4 years ago
:white_check_mark::white_check_mark::white_check_mark::x:
: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 :x: There is something wrong with the autoplay configuration in your slider-layout
:white_check_mark::white_check_mark::white_check_mark::x:
: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 :x: There is something wrong with the autoplay configuration in your slider-layout
: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
Carrossel de blocos
:sparkles: Branch: slider-layout
Introdução
O Slider Layout, como o Flex Layout, é uma forma flexível de criar um novo bloco a partir de outros blocos usando
children
. Ele permite que sejam criados sliders de outros blocos, comoinfo-card
s e até mesmoflex-layout
s por exemplo.Vamos utilizar o Slider Layout para tornar um conjunto de info-cards em um slider.
Slider Layout
Analisando a documentação, vemos que você pode utilizar qualquer array de blocos como
children
, assim como no Flex Layout.Abaixo, segue um exemplo de implementação de um slider-layout com dois
info-card
:Atividade
Nesta atividade, vamos criar um slider de marcas para o nosso site:
No arquivo
home.jsonc
, declare o blocoslider-layout#home
ao templatestore.home
.Crie um arquivo chamado
slider-layout.jsonc
dentro da pasta/store/blocks
;Neste arquivo, baseando-se no código acima, substitua os
info-card
declarados como children deslider-layout#home
e adicione 6 componentes de imagemimage
como children. Utilize o formatoimage#brand1
,image#brand2
(...)image#brand6
para declarar os componentes;Declare uma prop
src
específica para cadaimage#brand
definido. Utilize as URLs abaixo para cada uma delas: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 fim, você deve utilizar a propriedade de
autoplay
no blocoslider-layout#home
. Faça com que o slide aconteça automaticamente a cada 7 segundos e que ele pare quando o usuário passar o mouse em cima do slide.:information_source: Lembre-se de acessar a documentação do Slider Layout e Image caso tenha alguma dúvida durante a atividade.
:no_entry_sign: Perdido?
Há algum problema com esse passo? Que tal nos enviar um feedback? :pray:
Criar feedback
Se ainda tiver dúvida sobre como enviar sua resposta, você pode rever aqui.