# Como criar um carrossel no editor por Componentes

**Objetivo:** Ensinar como inserir um carrossel de imagens ou de imagens e textos no Construtor por Componentes.\
**Para que serve:** O carrossel é um recurso muito utilizado em páginas, pois permite mostrar uma série de imagens e textos no formato de slide para que os usuários possam navegar.

**Requisito Obrigatório:** \
**1.** Ter uma página feita no Construtor por Componentes.\
 *Caso queira saber mais sobre o editor,* [Construtor Componentes](/paginas/construtores)*.*

## **Inserindo o carrossel na página**

**Nº1–** Dentro da edição, selecione o componente **“Carrossel”** e arraste-o até o local da sua página em que deseja inserir.

**Nº2–** Clique em **“Editar carrossel”**.

**Nº3–** Um pop-up abrirá com duas opções de modelo. O primeiro deles (**001**) é um carrossel somente com imagens, já o segundo (**002**) têm imagens e textos. 

Abaixo explicaremos quais edições é possível fazer em cada um deles.  

## **Modelo 001**

**Nº4–** Para adicionar uma imagem ao carrossel, basta passar o mouse sobre o modelo até aparecer a opção **“Alterar imagem”** e clicar nela para escolher o arquivo no seu computador. 

****Observação:**** Não há um tamanho ideal para as imagens, mas recomendamos que elas sejam na **horizontal** e que todas tenham as **mesmas dimensões**.

**Nº5–** Adicione aqui um novo slide ao carrossel.

**Nº6–** Para navegar entre as telas, clique nos ícones de flecha na lateral esquerda e direita.

**Nº7–** Deixe esta opção habilitada se quiser que o carrossel rode automaticamente na página.

**Nº8–** Coloque o tempo, em segundos, da transição de um slide para outro.

**Nº9–** Caso queira que mais de uma imagem apareça ao mesmo tempo, uma ao lado da outra, escolha aqui a quantidade de slides por tela (é permitido até 5).

**Nº10–** Se escolher mais de um slide por tela, defina também o espaço entre eles.

**Nº11–** Aqui você pode determinar a cor de fundo que ficará na borda das imagens do seu carrossel.

**Nº12–** Marque esta caixa para aparecer na navegação as flechas ao lado dos slides e o indicador de qual está ativo no momento.

**Nº13–** Se selecionar a opção do passo anterior, escolha a cor dos ícones de navegação.

**Nº14–** Para resetar as configurações do modelo para o padrão, clique neste botão.

### **Modelo 002**

**Nº4–** Escreva um título para o seu slide. 

**Nº5–** Faça a descrição que desejar logo abaixo.

**Observação:** O título e a descrição do slide podem não ficar visíveis logo ao começar a editar o modelo. Para escrever nestes campos, clique do lado esquerdo da imagem até o quadrado de texto ser habilitado para editar.

**Nº6–** Para inserir uma foto, clique no ícone **“Alterar imagem”** e escolha o arquivo do seu computador.

**Nº7–** Se quiser adicionar um novo slide, basta clicar no botão correspondente a essa função logo abaixo.

**Nº8–** Navegue pelas telas clicando nos ícones de seta na lateral esquerda e direita.

**Nº9–** Caso queira que o carrossel rode automaticamente na página, marque esta opção.

**Nº10–** Defina aqui o tempo que irá durar a transição do autoplay.

**Nº11–** Determine o espaço, em pixels, entre um slide e outro.

**Nº12–** Escolha uma cor para ser aplicada ao fundo, atrás das imagens e textos.

**Nº13–** Marque este checkbox caso queira que as flechas para navegar e o indicador de qual slide está ativo no momento fiquem visíveis.

**Nº14–** Se selecionou a opção indicada no passo anterior, defina uma cor para os ícones de navegação.

**Nº15–** Escolha aqui uma cor para ser utilizada no título.

**Nº16–** Faça o mesmo para o conteúdo do texto.

**Nº17–** Se quiser resetar as configurações e voltar para os padrões do modelo, clique aqui.

### **Salvando as configurações**

Depois que finalizar a criação do seu carrossel, você pode **visualizar um preview**, **cancelar as edições** ou **aplicar** as alterações que você fez. 

Assim que inserir na página, ao clicar sobre ele dentro do editor abrirá um menu na lateral direita no qual será possível **editar o carrossel**, **esconder o bloco em que ele está** e **ativar um identificador** para ele, que pode ser utilizado para[ configurar uma âncora ](/paginas/construtores/componentes-como-fazer-ancora-na-pagina)mais tarde. 

**Suporte**

Se surgir qualquer dúvida ou situação, ou se precisar de qualquer ajuda durante este procedimento, por favor, **entre em contato com o nosso suporte**!