post

Slide Infinito com o Widget Carrossel de Imagens do Elementor com WordPress

Publicado em: 06/08/2024 / Atualizado em: 06/08/2024

Categorias: BlogCSSElementorWordpress

Neste artigo disponibilizo um código CSS bem simples que pode lhe auxiliar a criar um carrossel de imagens com scroll (rolagem) infinita. É muito simples adicionar este efeito.

1 – Adicione o widget de carrossel em sua página, como mostra no exemplo abaixo:

image
Print do widget de carrossel do Elementor

2 – Edite as opções do carrossel do Elementor, para desativar e zerar as opções, como mostra a imagem abaixo:

image 1
Print da tela de configuração de “Opções adicionais”

3 – Adicione este código CSS no widget:

selector {
    width: auto !important;
    min-width: 1920px !important;
    max-width: 100vw !important;
} 

selector .swiper-wrapper{
    animation: scrollInfiniteLeft 120s linear infinite;
}

@keyframes scrollInfiniteLeft {
    from {
        transform: translateX(0%);
    }
    to {
        transform: translateX(-100%);
    }
}

OBS: Caso não tenha essa opção, por não usar o Elementor PRO, você pode adicionar algum plugin de inserção de código personalizado em sua instalação do WordPress, como o plugin WPCode, e editar esse código, trocando o elemento “selector” por uma Class personalizada e adicionando no widget.

Publicações recomendadas:

Inscreva-se em Nossa News:

Seja notificando sempre que tiver conteúdo novo disponível no meu canal do Youtube ou artigo no meu Blog.

Bruno Devs News

Link Curto para Compartilhamento

Compartilhe esse conteudo nas redes sociais ou por mensagem usando o link curto abaixo. Basta clicar em cima do link para copiar.

bruno.art.br/pb/5590

ID de Referência: 5590

Sugira uma publicação

Envie uma mensagem e sugira um publicação sobre um assunto que tenha dificuldades de resolver.

Clique aqui e entre em contato


Comentários