JavaScript: implementare lo sliding orizzontale degli elementi

In questo articolo vedremo come implementare lo sliding orizzontale degli elementi con JavaScript.

Possiamo creare la seguente funzione:

const slideTo = (element = null, offset = 0, delay = 400) => {
        return new Promise(( resolve, reject ) => {
            if(element === null) {
                reject(false);
            }
            const sign = offset === 0 ? '' : '-';
            const rule = `translateX(${sign}${offset}px)`;
            element.style.transform = rule;
            setTimeout(() => {
                resolve(true);
            }, delay);
        });
        
    };

Il parametro delay ha lo scopo di sincronizzare la routine con l'eventuale transizione CSS impostata.