Виктория

https://threejs.org/

Я чуть переписал твой js, но теперь как ты хотела так и работает

let interval = null

class Slider {
    constructor(elemID, onLoad) {
        this.elem = document.querySelector(`#${elemID}`);
        this.slidesMain = this.elem.querySelectorAll('.slide');
        this.currentSlide = 0
        this.onLoad = onLoad

        this.changeSlideOnHover()
        
        if (onLoad) {
          this.changeSlideOnLoad()
        }
    }

    nextSlide() {
        this.slidesMain[this.currentSlide].classList.remove("showing");
        this.currentSlide = (this.currentSlide + 1) % this.slidesMain.length;
        this.slidesMain[this.currentSlide].classList.add("showing");
    }

    changeSlideOnHover() {
        this.elem.addEventListener("mouseenter", () => {
            clearTimeout(interval)
            this.nextSlide()
            interval = setInterval(() => {
                this.nextSlide()
            }, 6000);
        });
        this.elem.addEventListener("mouseleave", () => {
            clearTimeout(interval)
        });
    }
    
    changeSlideOnLoad() {
        this.nextSlide()
        interval = setInterval(() => {
            this.nextSlide()
        }, 6000);
    }
}

const slider1 = new Slider('slidesLeft', true);
const slider2 = new Slider('slidesRight', false);

И в css измени .presentation-title на такой:

.presentation-title {
    position: relative;
    padding-bottom: 124px;
    font-size: 75px;
    color: #ffffff;
    z-index: 2;
    font-weight: 800;
    pointer-events: none;
}