NoCopyrightCode
@NoCopyrightCode
Программист с "кастылями" в коде

Как при наведении мышки на слайдер сделать паузу?

let slider = document.getElementById("slider");
setInterval(function () {
  timer();
}, 5000);

function timer() {
  if (slide1.classList.contains("blue-bg")) {
    slide1.classList.add("hidden");
    slide1.classList.remove("blue-bg");
    slide2.classList.add("red-bg");
    slide2.classList.remove("hidden");
    //
    dot2.classList.add("active-dot");
    dot1.classList.remove("active-dot");
    dot3.classList.remove("active-dot");
  } else if (slide2.classList.contains("red-bg")) {
    slide2.classList.add("hidden");
    slide2.classList.remove("red-bg");
    slide3.classList.add("green-bg");
    slide3.classList.remove("hidden");
    //
    dot3.classList.add("active-dot");
    dot2.classList.remove("active-dot");
    dot1.classList.remove("active-dot");
  } else if (slide3.classList.contains("green-bg")) {
    slide3.classList.add("hidden");
    slide3.classList.remove("green-bg");
    slide1.classList.add("blue-bg");
    slide1.classList.remove("hidden");
    //
    dot1.classList.add("active-dot");
    dot2.classList.remove("active-dot");
    dot3.classList.remove("active-dot");
  }
}


<section id="slider" class="slider">
        <div id="slide1" class="slide1"></div>
        <div id="slide2" class="slide2"></div>
        <div id="slide3" class="slide3"></div>
</section>


.slide1,
.slide2,
.slide3 {
    animation: slide 5s;
}

@keyframes slide {
    0% {
        opacity: 0.4;
    }

    5% {
        opacity: 1;
    }

    95% {
        opacity: 1;
    }

    100% {
        opacity: 0.4;
    }
}


(и остановить анимацию css)
  • Вопрос задан
  • 50 просмотров
Решения вопроса 1
@TheAndrey7
Слушайте события mouseenter/mouseleave на слайдере и отменяйте clearInterval(), потом его возобновляйте.
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы