Slide (Listing Grid) com largura total com JetEngine

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