Com as recentes atualizações do editor Gutenberg, o bloco original de carrossel passou a apresentar falhas de compatibilidade, comprometendo sua funcionalidade em diversos portais. Diante disso, a Seox desenvolveu um novo bloco de carrossel, totalmente reconstruído para garantir plena integração com o Gutenberg em sua versão mais atual, mantendo ainda a compatibilidade com os carrosséis já existentes.
O novo bloco mantém a proposta original de oferecer uma navegação dinâmica em slides horizontais e continua sendo amplamente utilizado para criar carrosséis de vídeos, depoimentos, conteúdos visuais e seções informativas adicionais. Além de corrigir os problemas da versão anterior, ele foi projetado com foco em performance, responsividade e flexibilidade de layout para atender diferentes propostas editoriais.
Dica
Se a sua intenção for exibir uma sequência de imagens em carrossel, o mais recomendado é utilizar o bloco Galeria de Imagens, que conta com uma opção de carrossel otimizada justamente para esse tipo de uso. Ele foi desenvolvido especificamente para cenários com múltiplas imagens, garantindo melhor desempenho, usabilidade e organização visual.
Configurações
1 Acessando o bloco Gutenberg
Para utilizar o novo bloco de carrossel, abra o editor Gutenberg em uma página ou post. Em seguida, clique no botão “+” localizado no canto superior esquerdo da tela para acessar a biblioteca de blocos. Na busca, digite “Carrossel” e selecione o bloco correspondente.
Uma alternativa rápida é digitar “/carrossel” diretamente no campo de edição de texto. O editor exibirá automaticamente as opções disponíveis para inserção do novo bloco.
2 Configurando estilo de navegação
Com o bloco de carrossel selecionado, acesse a barra lateral direita do editor Gutenberg para visualizar as opções de configuração. A primeira seção disponível corresponde ao estilo de navegação do usuário, onde você poderá escolher como ele interage com o carrossel.
Você pode optar por exibir setas laterais ou dots (aqueles pequenos pontos centralizados abaixo do carrossel que indicam a posição atual do slide). Em seguida, defina o efeito de transição entre os slides, escolhendo entre o efeito deslizante ou o efeito de desaparecimento gradual.
Por fim, ajuste a velocidade da animação de transição. São oferecidas quatro opções, desde a mais rápida (quase instantânea) até a mais lenta, com uma transição de até 800 milissegundos, permitindo que você adeque o ritmo de navegação ao estilo do conteúdo exibido.
3 Configurações avançadas
Nesta seção, você encontrará opções que controlam o comportamento e a fluidez do carrossel, permitindo um ajuste fino da experiência de navegação. Você poderá ativar a opção “Passar Infinitamente”, que reinicia a exibição automaticamente quando o carrossel atinge o último slide, garantindo uma rotação contínua dos conteúdos. Caso os elementos dentro dos slides não estejam centralizados, a opção “Centralizar slides” pode ser ativada para ajustar a exibição. Se o conteúdo inserido ultrapassar os limites padrão do bloco, utilize a opção “Extrapolar (Overflow)” para garantir que tudo seja exibido corretamente, mesmo fora da área visível do slider. A configuração “Adaptar altura do slide” garante que todos os slides mantenham uma altura consistente, independentemente do conteúdo. Por fim, é possível ativar o “Auto Play”, que faz com que o carrossel inicie automaticamente sua rotação assim que a página é carregada, sem necessidade de interação do usuário.
4 Configurações de Visibilidade
Nesta seção, você define como os slides serão exibidos para o usuário. É possível configurar a quantidade de slides visíveis por vez, o número de slides que devem avançar a cada transição e o espaçamento entre eles, garantindo uma navegação mais confortável. Essas configurações podem ser personalizadas individualmente para desktop, tablet e mobile, permitindo que o carrossel se ajuste corretamente a diferentes tamanhos de tela e proporcione uma experiência responsiva e consistente em todos os dispositivos.
5 Configurando os Slides
Assim que o bloco do carrossel estiver inserido na página, você poderá adicionar e gerenciar os slides diretamente na barra de ferramentas que aparece sobre o bloco selecionado. A primeira opção, com o ícone de “+”, permite adicionar um novo slide ao carrossel. Em seguida, você encontra a opção de duplicar o slide atual, ideal para agilizar a criação de slides com estrutura semelhante. Também está disponível o botão de exclusão, caso deseje remover um slide específico. Para navegar entre os slides dentro do editor do Gutenberg, utilize as setas laterais exibidas na própria interface do bloco.
Você também encontrará as mesmas opções da barra de ferramentas disponíveis diretamente no próprio slide, organizadas de forma intuitiva. À esquerda, estará o botão “Adicionar Slide”, seguido por um botão com ícone para duplicação rápida do slide atual. Do lado direito, você verá o ícone de lixeira para excluir o slide selecionado, além das setas de navegação e a indicação de qual slide está ativo no momento. Essa estrutura facilita a edição e organização do carrossel diretamente dentro do editor.
