---
updatedAt: 2025-05-14T08:21:57.000Z
agentTools:
  projectIndex: https://learn.vtex.com/llms.txt
---

# Gabarito para o passo 'Carrossel de blocos'

<HTMLBlock>{`
<style>
      section#hub-content header h1, section#hub-content header h2 {
        color: #f71963
      }
    
      p {
        line-height: 1.5rem;
      }
    </style>
`}</HTMLBlock>

```json home.jsonc
{
  "store.home": {
    "blocks": [
      "rich-text",
      "info-card#button-right",
      "info-card#button-left",
      "flex-layout.row",
      "slider-layout#home"
    ]
  }
  //...,
}
```
```json slider-layout.jsonc
{
  "slider-layout#home": {
    "children": [
      "image#brand1",
      "image#brand2",
      "image#brand3",
      "image#brand4",
      "image#brand5",
      "image#brand6"
    ],
    "props": {
      "autoplay": {
        "timeout": 7000,
        "stopOnHover": true
      }
    }
  },
  "image#brand1": {
    "props": {
      "src": "https://appliancetheme.vteximg.com.br/arquivos/flatflat-brand-logo-square1.png"
    }
  },
  "image#brand2": {
    "props": {
      "src": "https://appliancetheme.vteximg.com.br/arquivos/flatflat-brand-logo-square2.png"
    }
  },
  "image#brand3": {
    "props": {
      "src": "https://appliancetheme.vteximg.com.br/arquivos/flatflat-brand-logo-square3.png"
    }
  },
  "image#brand4": {
    "props": {
      "src": "https://appliancetheme.vteximg.com.br/arquivos/flatflat-brand-logo-square4.png"
    }
  },
  "image#brand5": {
    "props": {
      "src": "https://appliancetheme.vteximg.com.br/arquivos/flatflat-brand-logo-square5.png"
    }
  },
  "image#brand6": {
    "props": {
      "src": "https://appliancetheme.vteximg.com.br/arquivos/flatflat-brand-logo-square6.png"
    }
  }
}
```

<HTMLBlock>{`
<div id="back-button">
            <i class="fa fa-angle-left"></i>
            <a id="back-link" href="/docs/course-layout-blocks-step03slider-lang-en">back</a>
          </div>
`}</HTMLBlock>

<hr/>
<div id="contribute-container">
  <p id="contribute-title"> 
    Help us make this content better!
  </p>
  <p id="contribute-description">
    VTEX IO courses are open source. If you see something wrong, you can open a pull request!
  </p>

  <a id="contribute-button" href="https://github.com/vtex/vtex-courses/edit/master/courses/layout-blocks/steps/03_slider/answersheet">
    Make a contribution
  </a>

  <p id="contribute-issue">
    or <a href="https://github.com/vtex/vtex-courses/issues/new/choose">open an issue</a>
  </p>

</div>