Elementor Image Carousel Widget: controle deslizante gratuito com Lightbox e Coverflow
O widget de carrossel de imagem em Addons Master transforma uma galeria WordPress em um controle deslizante descartável. Você escolhe as imagens, escolhe quantas aparecem na área de trabalho, tablet e telefone e adiciona reprodução automática, um loop infinito, uma caixa de luz e um layout 3D Coverflow, se desejar. Cada slide pode ser estilizado em seu estado normal, flutuante e ativo, e as setas, pontos e barra de progresso seguem sua marca. Funciona para portfólios, fotos de produtos, passeios em hotéis e propriedades e logotipos de clientes.
Layouts de coverflow e carrossel
Escolha um layout de carrossel ou coverflow em configurações de carrossel. Os slides por coluna definem quantos slides são exibidos de uma vez, de 1 a 6, com valores separados para desktop, tablet e celular, para que o carrossel seja responsivo sem CSS extra. Slides para rolar Define o quão longe cada etapa se move. Loop torna o carrossel infinito e a reprodução automática, o slide central, o cursor de agarrar e o modo de arraste livre, mude o modo como ele se move. Ligue o Observer quando o carrossel estiver dentro de uma aba ou de um acordeão.
- Responsiva: contagem de slides diferente em desktop, tablet e celular.
- Movimento: velocidade de reprodução automática, velocidade de animação, pausa ao passar o mouse e um loop infinito.
- Altura: AUTO ALTURA segue o slide mais alto visível ou define uma altura personalizada para o carrossel.
Estilo slides em estados normais, flutuantes e ativos
A seção de itens do carrossel estiliza a caixa em torno de cada imagem em três estados. Defina um plano de fundo, borda, sombra e preenchimento para normal, pairar e ativo, além do intervalo de itens entre os slides e a opacidade. Use o estado ativo para destacar o slide do centro de seus vizinhos.
- Passe o mouse: um levantamento de sombra ou uma mudança de cor quando o ponteiro estiver sobre um slide.
- Ativo: uma borda ou plano de fundo diferente no slide atual.
- Quadro: raio da borda, sombra da caixa e preenchimento em cada item.
Carrossel de imagem com lightbox, setas, pontos e barra de progresso
A navegação pode ser setas, pontos, setas e pontos, setas e frações, ou uma barra de progresso, e você pode adicionar uma barra de rolagem arrastável a qualquer um deles. As setas pegam ícones personalizados e ficam dentro ou fora do carrossel. A Lightbox está acesa por padrão e abre cada imagem em tamanho real com o FancyBox ou o Elementor Lightbox. O título da imagem e a legenda da biblioteca de mídia aparecem na Lightbox, e você pode estilizar ambos, junto com o ícone de visualização e a sobreposição.
- Setas: cor, tamanho, fundo e deslocamento horizontal, com a opção de ocultá-los no celular.
- Contadores: uma fração como 1/8 ou uma barra de progresso na parte superior ou inferior.
- Lightbox: FancyBox ou Elementor, com um ícone de visualização personalizado e sobreposição.
Carrossel de imagens Coverflow sem Elementor Pro
No Elementor, o efeito CoverFlow pertence ao widget Media Carousel, que faz parte do Elementor Pro. O carrossel de imagens de complementos mestres tem como opção de layout. Defina o layout para CoverFlow e o slide central voltará para a frente enquanto seus vizinhos se afastam. O popover de efeito CoverFlow possui quatro controles deslizantes: girar, alongamento, modificador e profundidade. O carrossel abaixo está disponível, então arraste-o ou use os pontos.
Para ver os estilos Flip, Arc e Orbit, consulte nosso guia para o Carrossel 3D do elementador.
Carrossel de imagem do elementador vs Carrossel de imagem de complementos mestres
O carrossel de imagens do Elementor é suficiente para um controle deslizante básico com legendas nos slides. Escolha um dos complementos mestres quando precisar de um layout Coverflow, uma barra de progresso ou um contador de frações, um estilo ou um estilo separado para o slide ativo.
| 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 |
| Legendas | No slide: título, legenda ou descrição | Na caixa de luz: título e legenda da imagem |
| 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 |
| links | Um URL personalizado para todos os slides | Nenhum campo de link, imagens abertas na caixa de luz |
O que o widget de carrossel de imagem pode e não pode fazer
Uma lista rápida do que está no widget e do que não está.
| Característica | Carrossel de Imagem |
|---|---|
| Lightbox (fancybox ou Elementor) | Sim |
| Layout do Coverflo | Sim |
| Slides por dispositivo, 1 a 6 | Sim |
| Setas, pontos, fração, barra de progresso e barra de rolagem | Sim |
| Reprodução automática e loop infinito | Sim |
| Estilização de slides normal, ativo e normal | Sim |
| Legenda na Lightbox (título e legenda da imagem) | Sim |
| Legenda no slide | Não |
| Link por imagem | Não |
| Várias linhas | Não |
| Vídeo slides | Não |
| Navegação em miniaturas | não, veja Galeria Slider (profissional) |
Exemplos de carrossel de imagens
Esses três carrosséis são widgets ativos. Clique em qualquer imagem para abrir a Lightbox. Mais layouts estão no visualizador de demonstração sob eles.
Tour de hotel, três de
Três slides na área de trabalho, dois no tablet e um no celular, com setas sobre as imagens.
Faixa de menu com uma barra de progresso
Reproduzir automaticamente com o modo de arraste livre e uma barra de progresso no lugar dos pontos.
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. Para animações de pairar em uma única imagem, consulte Efeitos de Hover de Imagem.
Para obter uma grade de imagens filtrada, consulte Galeria de imagens filtráveis.
Perguntas frequentes sobre carrossel de imagens
Qual é a principal vantagem sobre o Carrossel de Imagens básico da Elementor?
O Carousel Image do Elementor lida bem com um controle deslizante simples: Legendas, Lightbox, Autoplay e Slides por dispositivo. Add-ons mestre adiciona um layout 3D Coverflow, fração, barra de progresso e navegação na barra de rolagem, uma escolha de FancyBox ou o Elementor Lightbox com um ícone de visualização personalizado, estilo para slides normal, flutuante e ativo e uma opção de observador para carrosséis dentro de abas ou acordeões.
Como faço para manter todas as imagens do carrossel da mesma altura?
Carregue imagens com a mesma proporção, porque o widget mostra cada imagem em sua própria forma. Se você não conseguir cortá-los primeiro, dê ao widge uma classe CSS e defina uma altura fixa com Object-Fit: Cover nas imagens do slide. Custom Height define a altura do carrossel e não corta as imagens.
Posso usar isso para um controle deslizante de logotipo com escala de cinza para colorir ao passar o mouse?
Sim. Carregue suas imagens de logotipo. Na guia Itens do carrossel, defina a opacidade do estado normal ou use um filtro CSS para torná-los em tons de cinza. Em seguida, no estado de foco, defina a opacidade de volta para 1 e remova o filtro. ou use o Deslizador Logo widget, que é construído para logotipos de clientes.
O carrossel pode rolar continuamente?
Ele se move um passo de cada vez, com ou sem reprodução automática. Para uma faixa que desliza sem parar, construa uma marquise. nosso Guia de marquise Elementor Mostra três maneiras de fazer isso.
Qual é a diferença entre um carrossel e um controle deslizante?
Um controle deslizante mostra um slide de cada vez, geralmente de largura total. Um carrossel mostra vários de uma só vez em uma pista. Este widget faz as duas coisas: defina slides por coluna para 1 e funciona como um controle deslizante. há mais em carrossel vs slider.
Cada imagem pode ter seu próprio link?
não . As imagens são abertas na Lightbox e o widget não possui um campo de link. O carrossel de imagens do Elementor possui uma opção de URL personalizada, mas se aplica a todos os slides. Para um link por item, use o Deslizador Logo.
Widgets e extensões de elementos de tendência
Construa sites sofisticados em menos tempo.
Glassmorphismo
Contêiner Extras
Padrões
![Extensão Master Addons Post/Page Duplicator para Elementor: MA Link de linha Duplicator na lista de páginas WordPress criando uma página de destino - rascunho [duplicado #128]](https://d1asvmc6qcowgk.cloudfront.net/wp-content/uploads/2026/09/15102930/post-page-duplicator-768x403.webp)
Duplicador de postagem/página
