Как исправить мой скрипт чтобы при заходе на сайт слайдер слева работал, а левый нет?

Question

[Виктория]

Вот мой код:

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

Подскажите пожалуйста: как поправить скрипт, чтобы при загрузке сайта слайдер слева работал, правый -нет, но после наведения на правый он начинал работать, левый - останавливался и т.д. Буду благодарна за помощь.

Answer 1

[Стефан]

Я чуть переписал твой 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;
}

Comments

[Виктория]

Огромное спасибо!