Fiz algo parecido com um slide pra mostrar "destaques" em uma pagina, esse slide deve mostrar 3 imagens, sendo que sempre deve haver uma ocupando 50% da pagina e as outras 2 ocupando 25% cada uma. Chamarei a IMG com 50% de "dAtual", dAtual deveria mudar mudar a cada intervalo curto de tempo (seguindo um fluxo em ordem com em um slide da primeira pra terceira IMG), a mesma também deveria mudar quando o usuário passa o mouse no slide, quando ele passa o mouse em cima em uma IMG ela passa a ser dAtual e pausa o slide, quando o mouse sair de cima o slide continua a partir de dAtual dessa forma o evento que deve interagir com o slide e não apenas mudar o tamanho das coisas, deu um trabalhinho, mas ta funcionando com um pequeno bug visual a partir do seguinte código:

HTML

<div class="destaques">
         <ul class="listaDestaques">
            <li>
               <img id="destaque-1" src="../imgs/destaque_1.png" alt="Destaque 1">
            </li>
            <li>
               <img id="destaque-2" src="../imgs/destaque_2.png" alt="Destaque 2">
            </li>
            <li>
               <img id="destaque-3" src="../imgs/destaque_3.png" alt="Destaque 3">
            </li>
         </ul>
</div> -->

CSS

/*Destaques*/
.destaques {
    overflow: hidden;
    clear: both;
    position: relative;

 }
 .listaDestaques{
    margin: 0;
    list-style-type: none;
    width: 100%;
    height: 600px;
    position: relative;
    left: -40px;
 }
 .destaque-maior {
    transition: width 0.5s;
    width: 50%;
    height: 600px;
    object-fit: cover;
    float: left;

 }
 .destaque-menor {
    transition: width 0.5s;
    width: 25%;
    height: 600px;
    object-fit: cover;
    float: left;
 }

Javascript

let destaques = {
    d1: document.querySelector("#destaque-1"),
    d2: document.querySelector("#destaque-2"),
    d3: document.querySelector("#destaque-3"),
    dFluxo: 1, //Booleano
    dAtual: 0,
    dNext_1: 1,
    dNext_2: 2
}

let focus = [destaques.d1, destaques.d2, destaques.d3];

function adClass(elemento, classe) {
    elemento.classList.add(classe);
    return 0;
}
function rmClass(elemento, classe) {
    elemento.classList.remove(classe);
    return 0;
}
function attDestaque(newValue) {
    while (destaques.dAtual != newValue) {
        destaques.dAtual = contador(destaques.dAtual, focus.length);
        destaques.dNext_1 = contador(destaques.dNext_1, focus.length);
        destaques.dNext_2 = contador(destaques.dNext_2, focus.length);
    }

    adClass(focus[destaques.dAtual], "destaque-maior");
    rmClass(focus[destaques.dAtual], "destaque-menor");

    adClass(focus[destaques.dNext_1], "destaque-menor");
    rmClass(focus[destaques.dNext_1], "destaque-maior");
    adClass(focus[destaques.dNext_2], "destaque-menor");
    rmClass(focus[destaques.dNext_2], "destaque-maior");
}
function destaqueOver(d, dPosition) { //dPosition = posição da do destaque no vetor "focus"
    let dElement = dPosition;
    d.addEventListener("mouseover", function () {
            attDestaque(dElement);
            destaques.dFluxo = 0;
    });
    d.addEventListener("mouseleave", function () {
            destaques.dFluxo = 1;
    });
    dAtual = d;
    return 0;
}
function contador(variavel, limite) {
    if (variavel < (limite - 1)) {
        variavel++
        //console.log("'true'" + variavel + " delay test");
    } else {
        variavel = 0;
        //console.log("'false' " + variavel + " delay test");
    }
    return variavel;
};
adClass(destaques.d1, "destaque-maior");
adClass(destaques.d2, "destaque-menor");
adClass(destaques.d3, "destaque-menor");

destaqueOver(destaques.d1, 0);
destaqueOver(destaques.d2, 1); //passar a posição do focus!
destaqueOver(destaques.d3, 2);

setInterval(function () {
    if (destaques.dFluxo) {
        destaques.dAtual = contador(destaques.dAtual, focus.length);
        destaques.dNext_1 = contador(destaques.dNext_1, focus.length);
        destaques.dNext_2 = contador(destaques.dNext_2, focus.length);

        adClass(focus[destaques.dAtual], "destaque-maior");
        rmClass(focus[destaques.dAtual], "destaque-menor");

        adClass(focus[destaques.dNext_1], "destaque-menor");
        rmClass(focus[destaques.dNext_1], "destaque-maior");
        adClass(focus[destaques.dNext_2], "destaque-menor");
        rmClass(focus[destaques.dNext_2], "destaque-maior");
    }
}, 3500);