如何使滑块的上一个和下一个按钮起作用

Question

我在Sheor主页上有一个滑块，您可以看到。其下一个和上一个按钮不起作用。我有以下javascript

function hSlider() {
    const hTopBgItem= document.querySelectorAll('.hTopBgItem'),
        next= document.querySelectorAll('.hTopCtrControlsRight')[0].getElementsByTagName('svg').item(0),
        hTopCtrCounterLSpan= document.querySelectorAll('.hTopCtrCounterL')[0].getElementsByTagName('span').item(0),
        pre= document.querySelectorAll('.hTopCtrControlsLeft')[0].getElementsByTagName('svg').item(0);
    let active= 0;
    next.addEventListener('click', function () {
        if(active < hTopBgItem.length - 1) {
            active++;
            hTopBgItem[active].style.opacity = "1";
            hTopBgItem[active - 1].style.opacity = "0";
        }
        else {
            active= 0;
            hTopBgItem[active].style.opacity = "1";
            hTopBgItem[hTopBgItem.length - 1].style.opacity = "0";
        }
        hTopCtrCounterLSpan.innerHTML= "0" + (active + 1) + " /";
    }, false);
    pre.addEventListener('click', function () {
        if(active > 1) {
            active--;
            hTopBgItem[active].style.opacity = "1";
            hTopBgItem[active + 1].style.opacity = "0";
        }
        else if(active === 1) {
            active--;
            hTopBgItem[active].style.opacity = "1";
            hTopBgItem[active + 1].style.opacity = "0";
        }
        else {
            active= hTopBgItem.length - 1;
            hTopBgItem[active].style.opacity = "1";
            hTopBgItem[0].style.opacity = "0";
        }
        hTopCtrCounterLSpan.innerHTML= "0" + (active + 1) + " /";
    }, false);
    setInterval(function () {
        if(active < hTopBgItem.length - 1) {
            active++;
            hTopBgItem[active].style.opacity = "1";
            hTopBgItem[active - 1].style.opacity = "0";
        }
        else {
            active= 0;
            hTopBgItem[active].style.opacity = "1";
            hTopBgItem[hTopBgItem.length - 1].style.opacity = "0";
        }
        hTopCtrCounterLSpan.innerHTML= "0" + (active + 1) + " /";
    }, 3600);
}
smoothScroll.init({
    speed: 1200,
    easing: 'easeInOutCubic',
    offset: 0,
    updateURL: true,
    callbackBefore: function ( toggle, anchor ) {},
    callbackAfter: function ( toggle, anchor ) {}
});
AOS.init({
    offset: 220,
    duration: 1000
});