github-learning-lab[bot] commented 3 years ago

Carrossel de blocos

:sparkles: Branch: slider

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, como info-cards e até mesmo flex-layouts 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:


  "slider-layout#home": {
    "children": ["info-card#1", "info-card#2"],
    "props": {
      "autoplay": {
        "timeout": 5000,
        "stopOnHover": false
      }
    }
  },

  "info-card#1": {
    "props": {
      "imageUrl": "https://images.unsplash.com/photo-1524185962737-ea7c028a12cd?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80",
      "isFullModeStyle": true,
      "headline": "Black Friday",
      "callToActionText": "Subscribe",
      "textPosition": "center"
    }
  },

  "info-card#2": {
    "props": {
      "imageUrl": "https://images.unsplash.com/photo-1524185962737-ea7c028a12cd?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80",
      "isFullModeStyle": true,
      "headline": "Black Friday",
      "callToActionText": "Subscribe",
      "textPosition": "center"
    }
  }

Atividade

Nesta atividade, vamos criar um slider de marcas para o nosso site:

No arquivo home.jsonc, declare o bloco slider-layout#home ao template store.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 de slider-layout#home e adicione 6 componentes de imagem image como children. Utilize o formato image#brand1, image#brand2 (...) image#brand6 para declarar os componentes;
Declare uma prop src específica para cada image#brand definido. Utilize as URLs abaixo para cada uma delas:
1. https://appliancetheme.vteximg.com.br/arquivos/flatflat-brand-logo-square1.png
2. https://appliancetheme.vteximg.com.br/arquivos/flatflat-brand-logo-square2.png
3. https://appliancetheme.vteximg.com.br/arquivos/flatflat-brand-logo-square3.png
4. https://appliancetheme.vteximg.com.br/arquivos/flatflat-brand-logo-square4.png
5. https://appliancetheme.vteximg.com.br/arquivos/flatflat-brand-logo-square5.png
6. https://appliancetheme.vteximg.com.br/arquivos/flatflat-brand-logo-square6.png
Por fim, você deve utilizar a propriedade de autoplay no bloco slider-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.

vtex-course-hub[bot] commented 3 years ago

You did great! :grin:

Results

:white_check_mark::white_check_mark::white_check_mark::white_check_mark::white_check_mark:

Tests

:white_check_mark: Getting the files :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