Happy Addons slider não funciona: corrigir a navegação

Tipo Page Builders

Nome do erro Navegação do slider do Happy Addons não funciona EN: Happy Addons slider navigation not working

Severidade Atenção

Descrição O Happy Addons slider não funciona quando a opção de navegação está definida como None, quando o Swiper do Elementor não inicializa por conflito de JavaScript ou cache, ou quando o slider tem um único slide, fazendo as setas e os dots de navegação sumirem ou não avançarem.

O que é navegação do slider no Happy Addons?

O Happy Addons slider é um widget do Happy Elementor Addons que monta carrosséis de slides dentro do Elementor e reaproveita a biblioteca Swiper, a mesma engine de slider que o Elementor já carrega. A navegação do widget tem dois elementos: as setas (Arrow) e os dots de paginação (Dots), controlados na aba Settings do widget pela opção Navigation, que aceita Arrow, Dots ou Arrow and Dots. Quando essa engine não inicializa ou a navegação está configurada errada, os controles deixam de aparecer ou ficam visíveis mas não trocam o slide.

A falha aparece de duas formas. Na primeira, as setas e os dots simplesmente não são exibidos no front-end, em geral porque a opção Navigation está em None, porque há um só slide ou porque o CSS do Happy Addons não foi carregado. Na segunda, os controles aparecem mas clicar não muda de slide, o que indica que o JavaScript do Swiper não rodou: um plugin de cache ou de otimização adiou ou combinou os scripts do Elementor, um erro de JavaScript de outro plugin interrompeu a fila, ou a versão do Happy Addons e do Elementor estão dessincronizadas após uma atualização parcial.

Como identificar

As setas (Arrow) e os dots de navegação não aparecem no front-end, mesmo com a opção Navigation ativada no widget.
As setas e os dots aparecem, mas clicar neles ou arrastar não troca o slide; o slider fica parado no primeiro item.
O slider funciona no editor do Elementor, mas no site publicado a navegação some ou trava.
No console do navegador surge um erro como ‘Swiper is not defined’ ou ‘Cannot read properties of undefined’ ao carregar a página com o slider.
A navegação funciona no desktop, mas no celular as setas ou os dots desaparecem ou não respondem ao toque.
Depois de ativar um plugin de cache ou otimização (como WP Rocket ou Autoptimize), o slider que funcionava parou de avançar.

Antes de começar: Antes de mexer nas configurações do plugin de cache, atualizar plugins ou desativar plugins um a um em produção, faça um backup do site (arquivos e banco de dados) ou trabalhe em um ambiente de staging, para reverter sem prejuízo caso o layout do slider quebre.

Como prevenir

Sempre adicione swiper e os scripts do Elementor à lista de exclusão do Delay JavaScript Execution ao configurar plugins de otimização, para não quebrar a inicialização do slider.
Mantenha o Happy Addons e o Elementor atualizados em conjunto, validando antes em staging, para evitar markup dessincronizado entre o widget e o Swiper.
Depois de publicar uma página com slider, limpe o cache e confirme a navegação no front-end e no celular antes de divulgar o link.
Padronize ao menos dois slides e a opção Navigation definida ao criar cada slider, para que setas e dots nunca fiquem ocultos por configuração.

Causa

A opção Navigation, na aba Settings do widget Slider, está definida como None em vez de Arrow, Dots ou Arrow and Dots, então o Happy Addons não renderiza nenhum controle de navegação.
Um plugin de otimização adiou ou combinou os scripts (Delay JavaScript Execution, Defer ou Combine JS), impedindo a biblioteca Swiper do Elementor de inicializar o slider no carregamento da página.
Há um único slide configurado no widget: o Swiper esconde as setas e os dots quando não existe mais de um slide para navegar, então a navegação parece sumida.
Um erro de JavaScript de outro plugin ou do tema interrompe a fila de scripts antes do Happy Addons rodar, deixando o markup do slider sem o comportamento do Swiper.
As versões do Happy Addons e do Elementor estão dessincronizadas após uma atualização parcial, e o widget gera markup que a versão instalada do Swiper do Elementor não inicializa.
O recurso Improved Asset Loading do Elementor não carregou o CSS e o JS do Happy Addons nessa página porque o cache foi gerado antes de o widget ser adicionado, deixando setas e dots sem estilo nem script.

Como resolver

Confirme a opção Navigation do widget: Edite a página no Elementor, selecione o widget Slider e, na aba Settings, confirme que a opção Navigation está em Arrow, Dots ou Arrow and Dots, e não em None. Confirme também que existe mais de um slide, pois com um único slide o Swiper esconde os controles.
```
Painel WP -> Páginas -> editar a página com Elementor
Selecione o widget Slider -> aba Settings -> opção Navigation -> escolha Arrow and Dots
Confira a lista de Slides e mantenha pelo menos dois itens
```
Limpe os caches e regenere os assets do Elementor: O cache antigo pode estar servindo a página sem o CSS e o JS do Happy Addons. Limpe o cache do plugin de cache e use a ferramenta do Elementor para regerar os arquivos de estilo, depois recarregue o front-end com o cache do navegador limpo.
```
Limpe o cache do seu plugin (ex.: WP Rocket -> Configurações -> Limpar cache)
Painel WP -> Elementor -> Ferramentas -> Regenerar Arquivos e Dados (Regenerate Files & Data)
Recarregue a página publicada com Ctrl+Shift+R para ignorar o cache do navegador
```
Desligue o adiamento de JavaScript para o Swiper: Plugins de otimização costumam adiar ou combinar os scripts e impedir a inicialização do Swiper. Desative temporariamente o Delay JavaScript Execution e a combinação de JS, ou adicione o handle do Swiper e do Elementor frontend à lista de exclusão.
```
WP Rocket -> File Optimization -> desmarque Combine JavaScript files
WP Rocket -> Media -> em Delay JavaScript Execution, adicione swiper na lista de exclusão
Salve, limpe o cache e teste a navegação do slider no front-end
```
Sincronize Happy Addons e Elementor: Versões dessincronizadas geram markup que o Swiper instalado não inicializa. Atualize o Happy Addons e o Elementor para as versões estáveis mais recentes e confirme que o Elementor está ativo, já que o Happy Addons depende dele.
```
Painel WP -> Plugins -> atualize Happy Elementor Addons e Elementor
Confirme que o Elementor está ativo (o Happy Addons exige Elementor ativo)
Reabra a página no editor e republique para regenerar o markup do slider
```
Isole conflito de JavaScript de outro plugin: Se a navegação ainda travar, um erro de JavaScript de outro plugin pode estar interrompendo a fila antes do Swiper rodar. Abra o console do navegador, identifique o erro e desative os demais plugins um a um até a navegação voltar.
```
Abra o console do navegador (F12 -> Console) e recarregue a página com o slider
Anote a mensagem de erro de JavaScript e o plugin de origem
Painel WP -> Plugins -> desative os demais plugins um a um, testando o slider a cada passo
```

JavaScript

// Reinicializa os sliders do Happy Addons quando o Swiper carrega depois
// do markup (cenario de Delay JavaScript / combine JS de plugins de cache).
( function () {
	function reinitHappySliders() {
		if ( typeof Swiper === 'undefined' ) {
			return; // Swiper ainda nao chegou; sai sem erro.
		}
		document.querySelectorAll( '.swiper-container, .swiper' ).forEach( function ( el ) {
			if ( el.swiper ) {
				el.swiper.update(); // ja inicializado: so atualiza navegacao/paginacao.
			}
		} );
	}
	window.addEventListener( 'load', reinitHappySliders );
	document.addEventListener( 'DOMContentLoaded', reinitHappySliders );
} )();

Perguntas frequentes

Por que as setas do slider do Happy Addons não aparecem

Na maioria dos casos a opção Navigation, na aba Settings do widget, está em None ou o slider tem um único slide. Defina Navigation como Arrow ou Arrow and Dots e garanta pelo menos dois slides, pois o Swiper esconde os controles quando não há o que navegar.

O slider do Happy Addons funciona no editor mas não no site publicado

Isso costuma ser cache ou otimização. Limpe o cache do plugin, regenere os arquivos em Elementor -> Ferramentas e desative temporariamente a combinação e o adiamento de JavaScript, que impedem o Swiper de inicializar o slider no front-end.

A navegação aparece mas clicar não troca de slide, o que fazer

Os controles existem no HTML, mas o JavaScript do Swiper não rodou. Verifique o console do navegador por erros de JavaScript, exclua o handle swiper do adiamento de scripts no plugin de otimização e desative os demais plugins um a um para achar o conflito.

O plugin de cache pode quebrar o slider do Happy Addons

Sim. Recursos como Delay JavaScript Execution e Combine JavaScript adiam ou juntam os scripts e podem impedir a inicialização do Swiper. Adicione swiper e o frontend do Elementor à lista de exclusão e limpe o cache depois de salvar.

Preciso da versão Pro do Happy Addons para usar o slider

Não. O widget Slider faz parte do Happy Elementor Addons gratuito, disponível no WordPress.org. A navegação por setas e dots está na versão Free, configurada na aba Settings do próprio widget.

A navegação some só no celular, como resolver

Confira no widget se a navegação não está oculta no breakpoint do dispositivo e se o tema não esconde os controles por CSS no mobile. Teste também sem o adiamento de JavaScript, que afeta o toque ao atrasar a inicialização do Swiper no celular.

Atualizei o Elementor e o slider parou, qual a relação

O Happy Addons depende do Elementor e usa o Swiper que ele carrega. Uma atualização parcial deixa as versões dessincronizadas e o markup do widget pode não inicializar. Atualize Happy Addons e Elementor juntos e republique a página.

Grave

Como corrigir o Flexible Content que não salva layouts no ACF PRO

O Flexible Content que não salva no ACF PRO acontece quando os layouts e seus subcampos viram tantos campos no formulário que o POST ultrapassa o limite max_input_vars do PHP: o WordPress descarta o excedente, o nonce ou os dados não chegam e a atualização do post perde os layouts. A correção é elevar max_input_vars para 10000.

Grave

Como corrigir erros de compatibilidade entre o Elementor e o PHP 8.3

O erro de compatibilidade do Elementor com o PHP 8.3 acontece quando uma versão antiga do plugin roda num servidor já no PHP 8.3, disparando avisos de deprecated ou um fatal error que derruba o editor ou o front-end. A correção é alinhar o Elementor e o Elementor Pro na última versão e garantir os recursos de PHP exigidos.

Atenção

Como corrigir a duplicacao incorreta do Clone Field no ACF PRO

O ACF Clone Field não funciona corretamente quando duas instancias clonadas do mesmo grupo compartilham a mesma field_key e se sobrescrevem ao salvar. A correção oficial e usar Prefix Field Names com o modo de exibicao Group para dar nomes unicos a cada copia.

Grave

Como corrigir o Listing Grid vazio no JetEngine

O Listing Grid vazio no JetEngine ocorre quando a query (Post Status, Meta Query, Tax Query, Offset ou Cache Query) não retorna nenhum item para o Listing template. Corrige-se alinhando os parametros do Query Builder a dados que existem no site.

Atenção

Como corrigir o conflito de estilos de formulário entre WPForms e Elementor

O conflito de estilos entre WPForms e Elementor surge quando o formulário perde a aparencia dentro de uma página do Elementor: campos sem borda, botão sem cor ou layout em coluna única. Vem da opção de estilo do WPForms desligada, do Modern Markup desativado ou do CSS global do Elementor sobrescrevendo o formulário.

Atenção

Como corrigir o JetCompareWishlist que não adiciona produtos no WordPress

O JetCompareWishlist não adiciona produto quando o botão Comparar ou Lista de Desejos é colocado fora de um loop de produtos, quando as páginas de comparação e de lista não estão definidas nas configurações, ou quando o cache, um conflito de JavaScript ou cookies bloqueados impedem a requisição AJAX que salva o item.

Setores

Extensões

Integrações

Como corrigir a navegação do slider que não funciona no Happy Addons

O que é navegação do slider no Happy Addons?

Como identificar

Como prevenir

Causa

Como resolver

Perguntas frequentes

Itens relacionados

Como corrigir o Flexible Content que não salva layouts no ACF PRO

Como corrigir erros de compatibilidade entre o Elementor e o PHP 8.3

Como corrigir a duplicacao incorreta do Clone Field no ACF PRO

Como corrigir o Listing Grid vazio no JetEngine

Como corrigir o conflito de estilos de formulário entre WPForms e Elementor

Como corrigir o JetCompareWishlist que não adiciona produtos no WordPress

Setores

Extensões

Integrações

Extensões

Hero Sections

Seções de CTA

Login

Blog

Cabeçalhos

Seções de FAQ

Cadastro

Blog individual

Rodapés

Seções de contato

Seções de preços

Faixas

Portfólio

Seções de equipe

Números

Logotipos