How can I fix my script so that when I enter the site, the slider on the left works, but the left one does not?

Question

JavaScript

Here is my code:

<div class="container-fluid container-full presentation">
    <div class="desktop-picture">
        <div class="m-image__bar-image" style="width:57vw;">
            <ul id="slidesLeft">
               <li class="slide  slider-left showing" style="background-image:url(https://24.media.tumblr.com/6ddffd6a6036f61a1f2b1744bad77730/tumblr_mzgz9vJ1CK1st5lhmo1_1280.jpg)"></li>
               <li class="slide slider-left" style="background-image: url(https://25.media.tumblr.com/aff8a8a33156a0eda844140764fd4359/tumblr_mzgz3tBAAU1st5lhmo1_1280.jpg)"></li>
               <li class="slide slider-left" style="background-image: url('https://24.media.tumblr.com/f87b54bbce49e59debf7606662f54862/tumblr_n0hpxxDOJ91st5lhmo1_1280.jpg')"></li>
             </ul>

          </div>
          <div class="m-image__bar-image" style="width: 43vw; left: 57vw; right:0;">
            <ul id="slidesRight">
               <li class="slide slider-right showing" style="background-image:url(https://24.media.tumblr.com/0df0b55a4615378cf593241bad80a7da/tumblr_n0hpwpZrVc1st5lhmo1_1280.jpg)"></li>
               <li class="slide slider-right" style="background-image: url(https://24.media.tumblr.com/b94dbb2a392198d5cc39c19959598229/tumblr_n0hpthN8VH1st5lhmo1_1280.jpg)"></li>
              <li class="slide slider-right" style="background-image: url(https://31.media.tumblr.com/67d222ee577fc35faca83f0e08efc48e/tumblr_mzzqt7wyEU1st5lhmo1_1280.jpg)"></li>
</ul>

        </div>
    </div>
     <h1 class="presentation-title">LET'S BUILD YOUR <br>
                    DREAM PROJECT</h1>
</div>

.container-fluid.container-full {
    max-width: 100vw;
    max-height: 100vh;
    width: 100%;
    overflow: hidden;
    height: 100vh;
}
.presentation {
    position: relative;
    min-height: 100%;
    max-height: 100vh;
    display: flex;
    padding-right: 0;
    height: 100vh;
}
.container-fluid {
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
}
.presentation .desktop-picture {
    position: absolute;
    top: 0;
    bottom: 0;
    height: 100%;
    right: 0;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    left: 0;
    background-attachment: fixed;
}
.m-image__bar-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
}
 #slidesRight,
 #slidesLeft {
    position: absolute;
    width: 100%;
    height: 100vh;
    padding: 0;
    margin: 0;
    list-style-type: none;
}

.showing {
    opacity: 1;
    z-index: 2;
}
.slider-left {
    -webkit-transition: opacity ease-out 5s;
    -moz-transition: opacity ease-out 5s;
    -o-transition: opacity ease-out 5s;
    transition: opacity ease-out 5s;
}
.slider-right,
.slider-left {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100vh;
    opacity: 0;
    z-index: 1;
}
.slider-right:before,
.slider-left:before {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    right: 0;
    top: 0;
    width: 100%;
    height: 100vh;
    background-image: linear-gradient(180.03deg, rgba(20, 28, 41, 0.94) 13.3%, rgba(16, 33, 57, 0.31) 91.04%);
}
.slider-right {
    -webkit-transition: opacity 3s;
    -moz-transition: opacity 3s;
    -o-transition: opacity 3s;
    transition: opacity 3s;
}
.slider-left {
    -webkit-transition: opacity ease-out 5s;
    -moz-transition: opacity ease-out 5s;
    -o-transition: opacity ease-out 5s;
    transition: opacity ease-out 5s;
}

.showing {
    opacity: 1;
    z-index: 2;
}
.slider-right,
.slider-left {
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}
.presentation-title {
    position: relative;
    padding-bottom: 124px;
    font-size: 75px;
    color: #ffffff;
    z-index: 2;
    font-weight: 800;
}

document.addEventListener("DOMContentLoaded", function() {
  changeSlideOnHover('slidesLeft');
  changeSlideOnHover('slidesRight');
});

function changeSlideOnHover (elemID) {
    let elem = document.getElementById(elemID);
    let slidesMain = elem.querySelectorAll('.slide');
    let currentSlide = 0;
    let dr;

    function nextSlide() {
        window.clearTimeout(dr);
        slidesMain[currentSlide].classList.remove("showing");
        currentSlide = (currentSlide+1)%slidesMain.length;
        slidesMain[currentSlide].classList.add("showing");
        dr = window.setTimeout(nextSlide,2000);
    }

    elem.addEventListener("mouseenter", function(e) {
        nextSlide()
    });
    elem.addEventListener("mouseleave", function(e) {
        window.clearTimeout(dr)
    });
}

Please tell me: how to fix the script so that when the site loads, the slider on the left works, the right one does not, but after hovering over the right one, it starts working, the left one stops, etc. I will be grateful for your help.

Answer 1

I rewrote your js a little, but now it works as you wanted

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);

And in css change .presentation-title to this:

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