Swiper é a biblioteca JavaScript que alimenta todos os carrosséis do Elementor: o Carrossel de Imagens, Carrossel de Mídia, Carrossel Testemunho, Carrossel Loop, e todos os terceiros Widget carrossel elementor você instalou Não é um recurso do Elementor É uma biblioteca de controle deslizante de código aberto que o Elementor agrupa.
Saber que isso muda a forma como você depura um carrossel quebrado Quando um controle deslizante para de funcionar, o problema quase nunca é o widget É que o Swiper não carregou, não inicializou ou inicializou antes que seu contêiner tivesse largura.
Correção rápida: o controle deslizante parou de funcionar após uma atualização do plugin
Se você está aqui porque um carrossel de trabalho morreu repentinamente, tente isso antes de ler qualquer outra coisa:
- Abra seu plugin de cache ou otimização.
- Encontre as configurações de JavaScript: Combine JS, Defer JS, Delay JS.
- Desligue todos os três Limpe o cache Recarregue a página.
Se o carrossel voltar, a otimização JS o quebrou e a correção será uma exclusão, em vez de deixar a otimização desligada. Exclusões exatas mais abaixo.
O que o Swiper realmente faz
Três elementos aninhados Um recipiente, um invólucro dentro dele, e desliza dentro dele O Swiper lê a largura do recipiente, calcula quanto mover o invólucro para cada corrediça, e aplica uma transformada CSS no invólucro Os slides nunca se movem individualmente; a tira inteira desliza por baixo de uma janela.
É por isso que duas categorias de bugs dominam:
O roteiro não correu. Nada inicializa, então você vê todos os slides empilhados ou em uma fileira sem interação O CSS do Swiper geralmente ainda está lá, então parece meio estilizado em vez de claramente quebrado.
O recipiente não tinha largura quando era medido. Swiper calculado contra zero, então os slides se sobrepõem, sentam-se no tamanho errado ou a pista salta Este é o bug tab e acordeão: um carrossel dentro de um painel oculto mede-se enquanto está escondido.
As cinco coisas que quebram os carrosséis do Elementor
1. Combinação e adiamento de JavaScript
A causa mais comum por ampla margem.
O Swiper tem que ser definido antes que o código de inicialização inline seja executado Combinando arquivos de reordens JS. O adiamento empurra a execução além da chamada inline O atraso JS mantém a biblioteca de volta até a interação do usuário, momento em que o init já foi disparado e falhou.
Abra o console do navegador. Se você ver Swiper is not defined ou Cannot read properties of undefined, este é o seu problema.
Correção: exclua as alças do swiper da otimização em vez de desativá-la no atacado. No cache LiteSpeed, isso está em Otimização de página → Configurações JS. Adicionar:
swiper
elementor-frontend
jquery-coreUma coisa que as pessoas perdem no LiteSpeed: existem campos de exclusão separados e O Modo Convidado tem o seu próprio. Se você preencher apenas a caixa principal JS Exclui, os usuários logados veem um carrossel funcional e os visitantes logados não, que é exatamente o bug que sobrevive aos testes, porque você está logado enquanto testa Coloca as mesmas exclusões no campo Modo Convidado.
WP Rocket: Otimização de arquivos → Arquivos JavaScript excluídos, além das mesmas strings em Execução de JavaScript de atraso. Autotimizar: Extra → Excluir scripts do Autoptimize.
Carrossel 2. dentro de um recipiente escondido
Um carrossel em aba, acordeão ou painel fora da tela inicializa enquanto o painel está display: none. Largura lê como zero, e a matemática está errada desde o primeiro quadro Abra a aba e você terá slides sobrepostos ou uma faixa que não se moverá.
Correção: a maioria dos widgets expõe uma configuração “observer”. Ligue-o e o Swiper observa mudanças de tamanho e recalcula. Se o seu não, coloque o carrossel na primeira guia, que fica visível no carregamento.
Modo 3. loop com poucos slides
Loop funciona clonando slides para falsificar o wrap-around Ele precisa de pelo menos o dobro da contagem de slides por visualização para ter o suficiente para clonar Quatro slides em três por visualização produz um salto visível, lacunas em branco ou uma pista que pára no meio do caminho.
Correção: adicione slides ou desligue o loop Não há configuração que torne um loop curto suave.
4. duas versões Swiper em uma página
Elementor agrupa uma versão; alguns addons agrupam os seus próprios Ambos registram o mesmo global O que carregar o segundo ganha, e se um widget foi construído contra uma API diferente, ele quebra, muitas vezes com um erro sobre um método que não existe.
Correção: na consola, corra Swiper.version. Em seguida, desative os addons um de cada vez até que ele pare de mudar Os plugins bem comportados reutilizam a cópia do Elementor em vez de enviar a sua própria. A comparação do plugin carrossel notas quais fazem.
Carregamento preguiçoso 5. lutando contra o controle deslizante
O carregamento preguiçoso de imagens agressivas, especialmente um plugin separado de carga preguiçosa em cima do tema, pode deixar as imagens de slides a uma altura zero até que elas rolem para a vista Exceto que elas nunca rolam para a vista, porque estão em uma trilha horizontal Resultado: um carrossel de caixas vazias.
Correção: exclua a classe de imagem do carrossel do plugin de carga preguiçosa ou defina largura e altura explícitas nas imagens para que as caixas reservem espaço. Carrosséis vídeo acerte mais forte, porque cada slide fora da tela carrega um jogador e também uma imagem.
Como verificar se o Swiper carregou
Trinta segundos, e diz-te qual a metade do problema que tens.
- Abra a página com o carrossel quebrado.
- Abra o console do navegador (F12, ou clique com o botão direito do mouse → Inspecionar → Console).
- Tipo
typeof Swipere pressione enter.
"function" significa que a biblioteca foi carregada, então seu problema é a inicialização: observe contêineres ocultos ou configurações de loop. "undefined" significa que nunca chegou, e a causa é a otimização JS ou um script que falhou no início da cadeia. Role para cima no console para o primeiro erro vermelho, não para o último; erros posteriores geralmente são consequências do primeiro.
Configurações do swiper que importam no Elementor
A maioria dos widgets os expõe em Configurações de carrossel, às vezes com rótulos diferentes:
- Slides por visualização: quantos são visíveis; é a única configuração que separa um carrossel de um controle deslizante. Definir por ponto de interrupção, sempre.
- Slides para rolar: quantos avançam por clique. Definir isso igual a slides por visualização oferece paginação no estilo de página; configurá-lo para 1 dá uma sensação contínua.
- Velocidade: duração da transição em ms. 300 a 500 para padrão, mais lento para 3 D.
- Atraso de reprodução automática: pause em cada slide. Defina como 0 e ele se tornará um marquise, que é como o Widget do controle deslizante de logotipo geralmente está configurado.
- Loop: envoltório infinito. Precisa de slides suficientes, como acima.
- Altura automática: container combina com o slide visível mais alto Útil para texto irregular, e introduz uma animação de altura que pode parecer saltitante, por isso vale a pena testar em vez de assumir.
- Slides centrados: o slide ativo fica no centro em vez de nivelar para a esquerda. Necessário que o fluxo de cobertura pareça certo.
Onde estes aparecem no livre Widget Carrossel de Imagem: a imagem passo a passo carrossel tem as capturas de tela do painel.
Você deve carregar seu próprio Swiper?
Não, em quase todos os casos A cópia do Elementor já está na página sempre que um widget carrossel está presente, e adicionar um segundo causa o conflito de versão acima.
A exceção é um controle deslizante personalizado em uma página sem nenhum widget de carrossel Elementor. Então o Swiper da Elementor não está enfileirado e você precisa do seu próprio. Enfileire-o condicionalmente, apenas nesse modelo, para que você não reintroduza o conflito em nenhum outro lugar.
Perguntas frequentes
O que é Swiper no Elementor?
Swiper é a biblioteca de código aberto JavaScript slider que Elementor usa para todos os seus widgets carrossel e slider Elementor agrupa-lo e enfileira-lo sempre que um widget carrossel aparece na página A maioria dos addons carrossel Elementor de terceiros usar a mesma cópia em vez de enviar o seu próprio.
Por que meu controle deslizante Elementor Swiper não está funcionando?
Nove em cada dez vezes é otimização JavaScript a partir de um plugin de cache: combinar, adiar ou atrasar JS reordenando os scripts para que Swiper não seja definido quando o código init for executado Desligue esses três e recarregue Se o controle deslizante retornar, adicione swiper, elementor-frontend e jquery-core para as exclusões JS do plugin em vez de deixar a otimização desativada.
Como faço para corrigir “Swiper não está definido”?
A biblioteca não carregava antes do código de inicialização ser executado Exclua o swiper do JS combinando, adiando e atrasando no seu plugin de cache No LiteSpeed, adicione as exclusões ao campo Modo Convidado, bem como o principal, caso contrário, funciona para usuários logados e pausas para visitantes.
Qual versão do Swiper o Elementor usa?
Ele muda com as versões Elementor Verifique em qualquer página com um carrossel abrindo o console e rodando Swiper.version. Se isso retornar um número diferente do que você espera, um addon estará carregando sua própria cópia e substituindo a do Elementor.
Por que meus slides se sobrepõem ou se empilham uns sobre os outros?
O Swiper mediu o contêiner em largura zero, geralmente porque o carrossel fica dentro de uma aba, acordeão ou pop-up oculto no carregamento da página. Ative a configuração do observador para que ele recalcule quando o contêiner ficar visível ou mova o carrossel para um painel aberto por padrão.
Por que meu carrossel funciona quando conectado, mas não para visitantes?
Caching. usuários logados normalmente ignoram o cache e obtêm scripts não otimizados, para que o controle deslizante funcione Os visitantes obtêm a versão em cache, combinada e diferida e ela quebra Teste em uma janela privada e verifique se há um convidado separado ou lista de exclusão não autenticada em seu plugin de cache.
Se ainda está quebrado
Trabalhe nesta ordem: verifique primeiro o console (typeof Swiper), então exclusões de cache, em seguida, desativar addons um de cada vez em uma cópia de preparação Essa sequência encontra a causa em menos de dez minutos para quase todos os casos.
Projetos importados através do Construtor de widgets use a mesma compilação do Swiper que os widgets de estoque, para que essas correções se apliquem a eles também. O página preços abrange qual dos vinte precisa de licença.
Se preferir começar de algo conhecido, cada widget de carrossel no Widgets Carrossel Elementor a página é enviada com os identificadores de script seguros contra exclusão documentados e o Guia do carrossel Loop abrange a variante de consulta dinâmica dos mesmos problemas Se você estiver escolhendo um widget em vez de corrigi-lo, a quebra de widget carrossel grátis e o vinte modelos de controle deslizante são os dois lugares para começar.
