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

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.

Erros relacionados

- [Como corrigir o Happy Addons que não carrega no Elementor](https://full.services/wp-fixer/corrigir-happy-addons-nao-carrega-elementor/)
- [Como corrigir o erro do Image Grid no Happy Addons](https://full.services/wp-fixer/corrigir-image-grid-happy-addons/)
- [Como corrigir widgets do Happy Addons que não carregam no editor Elementor](https://full.services/wp-fixer/corrigir-happy-addons-widgets-nao-carregam/)

## 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

1. 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
```

2. 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
```

3. 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
```

4. 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
```

5. 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
```


## Código

```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.

**Fonte:** [Happy Addons — Documentação do widget Slider](https://happyaddons.com/docs/happy-addons-for-elementor/widgets/slider/)