Bonjour,

J'utilise Swup et je souhaite détruire certains comportements JS au changement de page, par exemple mon slider, qui est présent uniquement sur la page projet.

Si quelqu'un pouvez me dire ce qui cloche dans mon code ce serait génial !

const options = {
    linkSelector:
        'a[href^="' +
        window.location.origin +
        '"]:not([data-no-swup]), a[href^="/"]:not([data-no-swup])',
    animateHistoryBrowsing: true,
    cache: true
};

const swup = new Swup(options);

const projects = document.querySelector('#projects');

function Slider() {
    function scrollHorizontally(e) {
        e = window.event || e;
        const delta = Math.max(-1, Math.min(1, (e.wheelDelta || -e.detail)));
        projects.scrollLeft -= (delta*100);
        e.preventDefault();
    }

    if (document.addEventListener) {
        document.addEventListener('mousewheel', scrollHorizontally, false);
        document.addEventListener('DOMMouseScroll', scrollHorizontally, false);
    } else {
        document.attachEvent('onmousewheel', scrollHorizontally);
    }
};

function init() {
    if (projects) {
        const slider = new Slider();
    }
};

init();

function unload() {
    if (projects) {
        slider.destroy();
    }
};

document.addEventListener('swup:contentReplaced', init);
document.addEventListener('swup:willReplaceContent', unload);

Aucune réponse