Carrossel (slider)

O carrossel é usado para mostrar suas imagens movendo slides automaticamente ou respondendo a um clique ou movimento de deslize. No PageX, você pode adicionar um carrossel à sua landing page com códigos JavaScript e HTML. Você também pode adicionar vários slides de uma vez.

1. Faça login em sua conta no PageX e vá para o Dashboard de sua landing page.

2. Navegue até a guia JavaScript Code e clique em Add script.

Você também pode acessar a seção JavaScript Code diretamente do editor da sua landing page.

3. Adicione Name e no campo Content cole o código indicado abaixo. Escolha a posição Body bottom na Main page (página principal).

4. Clique em Add para salvar as alterações.

1. Navegue até o editor da sua landing page.

2. No lado esquerdo do editor, encontre o widget HTML e, em seguida, arraste e solte-o na área ativa de sua landing page.

3. Clique duas vezes para editar o widget.

4. Cole o código HTML:

5. O número de elementos div depende de quantas imagens seu carrossel deve ter, pois cada div deve conter um link para um arquivo de imagem.

Cada parte div é responsável por uma imagem. Repita a parte tantas vezes quanto houver imagens em um carrossel:

Edite todas as partes, mudando o link para o link da sua imagem.

É uma boa prática adicionar o parâmetro alt – é um texto que é exibido se por algum motivo o navegador do usuário não ler a imagem do carrossel. Inclua uma palavra ou palavras aqui que descrevam claramente o que a imagem contém. O uso adequado dos parâmetros alt tem um impacto positivo no posicionamento da página.

6. Salve e feche. Publique sua landing page.

7. Verifique se o carrossel é exibido corretamente. Se necessário, volte ao editor e ajuste o tamanho do widget.

DICA: o carrossel fica melhor quando as imagens têm as mesmas dimensões.

Se quiser usar imagens já carregadas em seu editor no PageX, é possível obter links para elas facilmente.

1. Navegue até o editor da sua landing page e abra sua Gallery por meio do widget Image.

2. Clique com o botão direito na sua imagem e selecione Inspect.

3. As ferramentas do desenvolvedor serão abertas. Copie o link para o local do arquivo.

4. Volte para a edição HTML. Cole o link em seu lugar no código. Repita quantas vezes forem necessárias.

Por padrão, o carrossel alterna automaticamente as imagens em intervalos de tempo baixos e não requer nenhuma configuração adicional. No entanto, você pode usar alguns parâmetros extras para alterar a forma como o carrossel funciona.

Esses parâmetros devem ser adicionados no código JavaScript, dentro da função responsável por iniciar o carrossel:

Todos os parâmetros devem ser separados por vírgulas. Não há necessidade de colocá-los verticalmente (um abaixo do outro), no entanto, isso facilita a análise do código.

• pauseTime: '1000' – define o tempo antes de o carrossel mudar. O tempo é dado em milissegundos, então 1000 é equivalente a 1 segundo;
• pauseOnHover: 'true' – 'true' interrompe o carrossel quando você passa o mouse sobre ele, permitindo que você tenha um vislumbre de seus elementos. Mover o cursor para fora da área do carrossel retoma a apresentação dos slides;
• startSlide: '0' – define qual slide será exibido primeiro. Por padrão, o primeiro slide é o primeiro div, mas você pode alterar essa ordem. Lembre-se de que 0 significa o primeiro slide, então 1 é o segundo slide e assim por diante.

Como resultado, o código pode ser o seguinte:

Após as alterações, publique sua landing page e verifique se o carrossel é exibido corretamente.