Blocks carousel

[github-learning-lab[bot]]

Carrusel de bloques

:sparkles: 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, 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:

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

Actividad

En esta actividad, crearemos un slider de marcas para nuestro sitio web:

1. En el archivo home.jsonc, declare el bloque slider-layout#home al template store.home .

2. Cree un archivo llamado slider-layout.jsonc dentro de la carpeta /store/blocks .

3. 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 imagen image como children. Utilice el formato image#brand1, image#brand2 (...) image#brand6 para declarar los componentes.

4. Declare una prop src específica para cada image#brand definido. Utilice las siguientes URLs para cada una:

   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

5. 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.

:information_source: Recuerde acceder a la documentación del Slider Layout e Image si tiene alguna duda durante la actividad.

[github-learning-lab[bot]]

¡Ha completado este paso con éxito!

Vaya al siguiente paso!

[vtex-course-hub[bot]]

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