post

Slide (Listing Grid) com largura total com JetEngine

Publicado em: 12/04/2023 / Atualizado em: 12/04/2023

Categorias: BlogCSSJetEngineJetPlugins

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;
}

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/2713

ID de Referência: 2713

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