Criar slideshow costumizado

Plugins necessários: Essential Addons.

Se quisermos criar um slideshow com widgets / containers á nossa escolha, deve-se criar um container pai e dentro deste, colocar containers filhos onde poderemos pôr quaisquer widgets que necessitemos.

Container-Pai

Este container NÃO pode ter nenhum estilo, cor, padding, etc., pois estará sempre visível.

No container pai, a única definição a definir é “altura mínima” porque os conteúdos terão alturas diferentes e vão assumir a altura do container pai. O valor a definir deverá ser o suficiente para acomodar o container filho mais alto.

Para alem disto, vamos ter de ir a Avançado > Layout e definir um ID de CSS (neste exemplo: “slides_txt”)
Depois, em Avançado > CSS personalizado, colocar o seguinte código (alterando o ID de “slide_txt” para o que for definido anteriormente):

#slide_txt {
    position: relative !important;
    height: 100%;
}

#slide_txt > div {
    height: 100%;
    opacity: 0;
    transition: 1s;
}

#slide_txt > div:first-child {
    opacity: 1;
}

.show {
    opacity: 1 !important;
    transition: 1s;
}

Container-Filho

A única definição necessária em cada um dos filhos é em Avançado > Layout > Posição: absoluto

Script

Resta apenas inserir o código de JavaScript. Pode-se adicionar um script apenas na página atual fácilmente, acedendo ao custom Js, que se encontra na aba “Avançado”, nas definições de página:

O código a colocar é o seguinte (atendendo que se deverá mudar o ID se assim for necessário):

var slides_txt = document.querySelectorAll('#slide_txt')[0].children;

var index = 0;

function cycle() {
    slides_txt[index].classList.remove('show');

    index++;

    if (index == slides_txt.length) {
        index = 0;
    }

    slides_txt[index].classList.add('show');
}

setInterval(cycle, 4000);