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

Question

[Рома]

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)

Comments

[Рома]

Некоторых елементов кода нету (точки) но, надеюсь, понятна суть