JSFiddle - React, Tailwind, and code Playground

HTML

<div id="carousel">CSS carousal</div>
<br>
<input type="radio" id="carousel1" name="carousel" checked="checked">
<input type="radio" id="carousel2" name="carousel">
<input type="radio" id="carousel3" name="carousel">

CSS

#carousel {
  width: 200px;
  height: 200px;
  padding:20px;
  background: brown;
  color: #fff;
  text-align: center;
  font-size: 36px;
}

JavaScript

var n = 0;
window.ev = false;
function autoSlide() {
        document.getElementById("carousel").onmouseenter = function () {
            window.ev = true;
        };

        document.getElementById("carousel").onmouseleave = function () {
            window.ev = false;
            setTimeout(autoSlide, 2000);
        };

        if (window.ev == false) {
            n++;
            if (n === 4)
                n = 1;
            document.getElementById("carousel" + n).checked = true;
            setTimeout(autoSlide, 2000);
        }
    }
    autoSlide();