Slide Infinito com Largura Total (Listing Grid) Usando o Elementor e JetEngine - Bruno Devx - BR Criativus

post #5736

Slide Infinito com Largura Total (Listing Grid) Usando o Elementor e JetEngine

Publicado em: 17/10/2024 / Atualizado em: 17/10/2024

Categorias: BlogCSSElementorJetEngineWordpress

Este código vai permitir que seu slide usando o widget Listing Grid do JetEngine fique com a largura total da tela, e também se movimente automaticamente para o lado de maneira suave sem parar.

/* Largura total */
selector .jet-listing-grid .slick-list {
    overflow: inherit;
}

/* Slide suave sem pausa */
selector .slick-track {
    animation: scrollInfiniteLeft 200s linear infinite;
}

selector .slick-track {
    width: max-content !important;
}

@keyframes scrollInfiniteLeft {
    0% {
        transform: translateX(0%);
    }

    100% {
        transform: translateX(-100%);
    }
}

@media (min-width: 1024px) {
	@keyframes scrollInfiniteLeft {
      0% {
          transform: translateX(0%);
      }

      100% {
          transform: translateX(calc(-100% - -1012px));
      }
	}
}

Publicações recomendadas:


Link Direto

Compartilhe esse conteudo nas redes sociais ou por mensagem usando o link direto abaixo. Basta copiar.

bruno.art.br/?p=5736

ID de Referência: 5736

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