post
Slide (Listing Grid) com largura total com JetEngine
Publicado em: 12/04/2023
Caso queira usar o modo slide do widget Listing Grid do JetEngine e deixar ele com largura total da tela mas destacando apenas os itens que estão no centro do container, como na imagem abaixo, siga esses passos.

Caso queira ver o slide em funcionamento acesse: https://brcriativus.com.br/teste-tutorial/exemplo-slide-infinito-com-jetengine-css-personalizado
Criando um listing grid com jetengine
Primeiro você deve ter algo para listar e exibir, então deve criar um CPT, cadastrar os itens, e depois criar um template personalizado em “JetEngine > Listings”.
Adicionando o widget Listing Grid na pagina
Crie uma pagina em branco ou abra a pagina que deseja colocar o slide com o Elementor.
Depois disso, arraste o plugin “listing grid” para sua pagina.

Selecione a lista criada no plugin, em seguida, adicione o código CSS abaixo no campo “CSS personalizado”:
selector .jet-listing-grid .slick-list { overflow: inherit; } selector .jet-listing-grid .slick-list .slick-slide { opacity: 0.2; -webkit-transition: all .3s; -o-transition: all .3s; transition: all .3s; } selector .jet-listing-grid .slick-list .slick-active { opacity: 1; -webkit-transition: all .3s; -o-transition: all .3s; transition: all .3s; }
Link de 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/2713
ID de Referência: 2713
Sugira uma publicação
Envie uma mensagem para mim, e sugira alguma publicação de algum tema que tenha dificuldades de resolver.