> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://ajuda.greatsoftwares.com.br/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).

# Como adicionar um SLIDER DE IMAGENS (carrossel) na sua página

Para criar um **Slider de Imagens** em uma página siga o tutorial abaixo:

1. No editor de página, através do menu do lado esquerdo da tela, clique no **Ícone de slider**;

![](https://storage.crisp.chat/users/helpdesk/website/-/a/6/a/b/a6ab90d8350d6000/captura-de-tela-2026-08-10-as-_ueacyc.png =650x656)

2. Em seguida, o elemento de slide estará inserido dentro do editor. Clique em **Editar**;

![](https://storage.crisp.chat/users/helpdesk/website/-/a/6/a/b/a6ab90d8350d6000/captura-de-tela-2026-08-14-as-_kuxu9i.png =650x587)

3. No canto direito da tela, abrirá uma aba. Nela você poderá configurar a aparência do Slider, começando pela aba de **Estilos**;

###### SETAS E TIPOS DE SETAS

* **Setas:** Habilite ou desabilite o ícone de setas clicáveis nos lados do Sliders.
* **Tipos de setas:** Escolha o ícone de seta que será usado no elemento.

![](https://storage.crisp.chat/users/helpdesk/website/-/a/6/a/b/a6ab90d8350d6000/captura-de-tela-2026-08-14-as-_1l49ah9.png =650x473)

###### ESTILIZAÇÃO, BORDAS E SOMBRAS

* **Cor de fundo**: Cor de fundo da seta usada no Slider.
* **Tamanho:** Tamanho da seta usado no Slider.
* **Bordas das setas:** Opção de usar ou não bordas no ícone de seta do Slider.
* **Bordas do slider:** Adicionar bordas no elemento de Slider.
* **Sombra do slider:** Adicionar efeito de sombra no elemento de Slider.

![](https://storage.crisp.chat/users/helpdesk/website/-/a/6/a/b/a6ab90d8350d6000/captura-de-tela-2026-08-14-as-_cn867q.png =650x596)

###### ANIMAÇÃO

* **Efeito**: Selecione o estilo de efeito desejado para o elemento. Alternando entre os efeitos, você pode ver como cada um funciona.
* **Direção**: Aqui você pode definir a direção da animação, por exemplo: para cima, para baixo, para a direita ou para a esquerda.
* **Velocidade**: Aqui você define a velocidade da sua animação. Quanto mais próximo de 250 ms, mais rápida a animação; quanto mais próximo de 2000 ms, mais lenta a animação.
* **Atraso**: Esta configuração permite definir o tempo de atraso da sua animação. Este tempo varia de 0 ms a 2000 ms.
* **Repetir**: Nesta função, você pode escolher se a animação aparecerá apenas uma vez ou continuamente.

![](https://storage.crisp.chat/users/helpdesk/website/-/a/6/a/b/a6ab90d8350d6000/captura-de-tela-2026-08-14-as-_hkf55.png =650x551)

4. Na aba de **Configurar**, você poderá inserir as imagens que irão rodar no slider, clicando em **"Adicionar imagem"**;

Também é possível excluir as imagens de exemplo clicando no ícone de **lixeira** ao lado de cada uma delas, ou alterá-las clicando no ícone de **lápis**.

![](https://storage.crisp.chat/users/helpdesk/website/-/a/6/a/b/a6ab90d8350d6000/captura-de-tela-2026-08-14-as-_iy4fr5.png =650x564)

5. Abaixo disso, você poderá realizar novas configurações, como:

###### IMAGEM POR VIEW

* **Imagens:** Configurar se aparecerá uma imagem por vez no slider ou se aparecerão duas por vez. 
* **Espaçamento:** Caso opte por aparecerem 2 imagens por vez, poderá habilitar o espaçamento entre elas.

###### CONFIGURAÇÕES

* **Slider automático**: O slider passará automaticamente a próxima imagem, sem que precise do clique para passar para a próxima.
* **Ajustar imagens ao slider:** Independente do tamanho da imagem, ela ficará proporcionalmente ajustada no tamanho do slider.

![](https://storage.crisp.chat/users/helpdesk/website/-/a/6/a/b/a6ab90d8350d6000/captura-de-tela-2026-08-14-as-_1osg5yg.png =650x567)

6. Por último, ainda na tela de **Configurar** habilite ou desabilite a opção de **"Visibilidade**", para ocultar ou não o elemento no Desktop ou Mobile;

![](https://storage.crisp.chat/users/helpdesk/website/-/a/6/a/b/a6ab90d8350d6000/captura-de-tela-2026-08-14-as-_1r3iq98.png =650x564)

7. Na última tela de **Edição**, no menu "**Código**", você poderá copiar o ID do elemento ou alterar o visual dele através de campo HTML (altere esse campo apenas se tiver conhecimento em código).

![](https://storage.crisp.chat/users/helpdesk/website/-/a/6/a/b/a6ab90d8350d6000/captura-de-tela-2026-08-14-as-_owoqz4.png =650x565)

Ficou com alguma dúvida? Chame nosso suporte, estamos sempre prontos para ajudar! :)