Elementor Image Carousel Widget: controle deslizante gratuito com Lightbox e Coverflow
O widget Carrossel de imagens em Master Addons transforma uma galeria WordPress em um controle deslizante deslizável, e é gratuito Você escolhe as imagens, escolhe quantos mostram no desktop, tablet e telefone e adiciona reprodução automática, uma lightbox e um layout de fluxo de cobertura 3 D se quiser cada slide pode ser estilizado em seu estado normal, pairar e ativo, e as setas, pontos e legendas seguem sua marca Ele funciona para portfólios, fotos de produtos, passeios de hotéis e propriedades e logotipos de clientes.
Layout avançado e controle de comportamento
Assuma o controle total sobre como seu carrossel se parece e se comporta Escolha um layout de Carrossel ou Coverflow Defina Slides por Coluna para exibições semelhantes a grade e defina quantos Slides para Rolar Ative recursos como Reprodução Automática, Loop, Modo Central e até mesmo um Cursor de Agarração para arrastar interativo A opção Observer garante que ele funcione perfeitamente dentro de abas ou acordeões.
- Layouts flexíveis: crie grades de várias linhas ou controles deslizantes horizontais clássicos com controle total sobre colunas e rolagem.
- Interações suaves: defina velocidade de reprodução automática, velocidade de animação e habilite Pause on Hover para um comportamento fácil de usar.
- Recursos adaptáveis inteligentes: use altura automática para evitar espaços vazios estranhos e observador para fazê-lo funcionar em contêineres ocultos.
Estilo Cada Parte, em Cada Estado
Faça do seu carrossel uma parte perfeita do seu design Não basta estilizar as imagens & style the container para cada item Defina fundos, bordas, sombras e preenchimento exclusivos para os estados Normal, Hover e Ativo Ajuste a lacuna de itens e a opacidade geral Esse nível de detalhe permite criar cartões interativos, destacar o slide ativo e fornecer feedback visual claro à medida que os usuários interagem.
- Feedback interativo: projete efeitos de pairar distintos (como um elevador de sombra ou mudança de cor) para envolver os visitantes.
- Destaque ativo do slide: faça com que o slide central atual se destaque com uma borda ou fundo diferente.
- Controle visual completo: personalize o raio da borda, a sombra da caixa e o preenchimento para um enquadramento perfeito do item.
Navegação e Lightbox Integrado
Guie seus visitantes corretamente em seu carrossel de imagens Projete uma navegação elegante de setas com ícones, cores, fundos e posicionamento personalizados (dentro, fora).Esconda-os no celular para uma aparência mais limpa Em seguida, habilite sua galeria com um Lightbox integrado Personalize o ícone de visualização, sobreposição e tipografia de legenda Escolha entre Fancybox e Elementor para abrir imagens em uma experiência de visualização bonita e em tela cheia.
- Setas de navegação personalizadas Setas do zero: o estilo muda sua cor, tamanho, e deslocamento horizontal.
- Optimizado para dispositivos móveis: opte por ocultar a seta no celular e confie em gestos de deslizamento para uma sensação nativa.
- Lightbox Premium: Ofereça uma visualização ampliada com ícones e sobreposições personalizáveis, transformando o carrossel em uma galeria completa.
Carrossel de imagem do elementador vs Carrossel de imagem de complementos mestres
Ambos os widgets são gratuitos A versão do Elementor é suficiente para um controle deslizante básico com legendas e links Escolha o Master Addons um quando precisar de um layout de fluxo de cobertura, linhas de imagens ou mais controle sobre navegação e estilo de slides.
| Carrossel de Imagem Elementor | Carrossel de imagens Master Addons | |
|---|---|---|
| Preço | Grátis | Grátis |
| Slides por visualização por dispositivo | Sim | Sim |
| Layouts | Deslize ou desbote | Carrossel ou fluxo de cobertura 3D |
| Várias linhas | Não | Sim, com Slides por Coluna |
| Navegação | Setas e pontos | Setas, pontos, balas dinâmicas, fração, barra de progresso e barra de rolagem |
| Caixa de luz | Caixa de luz do elementor | Fancybox ou Elementor, com um ícone de visualização personalizado e sobreposição |
| Estilo slide | Básico | Estados normais, de pairar e ativos |
| Vincule cada imagem a um URL | Sim | Não, imagens abertas na caixa de luz |
Como adicionar um carrossel de imagens no Elementor
Para um passo a passo mais longo com capturas de tela, leia como criar um carrossel de imagens no Elementor.
- Instale o plugin gratuito Master Addons e edite sua página com o Elementor.
- Pesquise no painel de widgets o Image Carousel e arraste-o para um contêiner.
- Clique no campo galeria, escolha suas imagens e defina a Resolução da Imagem.
- Defina quantos slides são exibidos por dispositivo e, em seguida, ligue o Autoplay, o Loop e a lightbox, se desejar.
- Escolha Carrossel ou Coverflow, estilize os slides e setas e publique.
Carrosséis relacionados: Deslizador Logo, Slider Equipe, Galeria Slider (Pro) e o Blog modo carrossel do widget.
Perguntas frequentes sobre carrossel de imagens
Qual é a principal vantagem sobre o Carrossel de Imagens básico da Elementor?
O Carrossel de Imagens gratuito da Elementor lida bem com um controle deslizante simples: legendas, uma lightbox, reprodução automática e slides por dispositivo Master Addons adiciona um layout de fluxo de cobertura 3 D, grades de várias linhas com Slides por Coluna, fração, barra de progresso e navegação na barra de rolagem, uma escolha de Fancybox ou a lightbox Elementor com um ícone de visualização personalizado, estilo para slides normais, flutuantes e ativos e uma opção Observer para carrosséis dentro de abas ou acordeões.
Se EU ativar 'Auto Height', minhas imagens serão esticadas ou cortadas?
A altura do No. Auto ajusta a altura geral do recipiente do carrossel para corresponder ao slide mais alto atualmente visível Suas imagens manterão sua proporção com base em suas outras configurações (como “Image Size”). Ela impede que alturas fixas criem grandes espaços em branco se você tiver imagens de orientações variadas de retrato/paisagem.
Posso usar isso para um controle deslizante de logotipo com escala de cinza para colorir ao passar o mouse?
Absolutamente! este é um caso de uso perfeito Carregue suas imagens de logotipo Na guia Itens Carrossel, defina o estado normal Opacidade ou use um filtro CSS para torná-los em escala de cinza Então, no estado Hover, defina a opacidade de volta para 1 e remova o filtro O estilo hover embutido torna esse efeito fácil sem código personalizado Ou use o Deslizador Logo widget, que é construído para logotipos de clientes.
Como funciona a configuração "Observador" e quando devo usá-la?
O Observer observa as mudanças no contêiner do carrossel Ative-o (definido como Sim) quando você coloca o carrossel dentro de uma aba, acordeão ou widget de alternância, ou em qualquer lugar que esteja inicialmente escondido Isso garante que o carrossel renderize e funcione corretamente no momento em que um usuário clicar para revelar seu contêiner pai Se estiver quebrado dentro de uma aba, isso geralmente o corrige.
Ter vários carrosséis com reprodução automática em uma página causará problemas de desempenho?
Pode, se você tiver muitos (como 15+).Cada carrossel de reprodução automática é um elemento móvel que o navegador deve animar Para melhor desempenho, limite a reprodução automática ao seu carrossel de heróis mais importante Para outros, considere deixar os usuários rolarem manualmente Além disso, usar tamanhos de imagem otimizados (através das configurações de Resolução de Imagem) é crucial para a velocidade.
Posso vincular itens do carrossel a URLs diferentes em vez de apenas a lightbox?
Não com este widget Ele abre imagens em uma caixa de luz Se cada slide precisa de seu próprio link, use o Deslizador Logo, ou a opção de link no Carrossel de Imagens do próprio Elementor.
Widgets e extensões de elementos de tendência
Construa sites sofisticados em menos tempo.
Glassmorphismo
Contêiner Extras
Padrões
Duplicador de postagem/página
