Как при смене img сделать меняющийся li

[maplol123@gmail.com]

Как сделать чтобы при смене картинки на заднем фоне - слайдер <div id="slider">, выделялся <li> под эту картинку и двигался <img src="/image/mainscl.svg">.
При наведении мыши на определенный <li> - он выделялся, и подбиралась соответствующая картинка. Затем если мышь не двигается около 10 секунд, все возвращалось в слайдер с продолжением от выбранного <li>.
Все <img> в таком же порядке как и <li>

Написал некоторый код - слайдер, который начинает двигаться, когда мышь без движения 5 секунд, а дальнейшие действия абсолютно не знаю как выполнить.

let nextBackground;
//при движении мыши
let timeout = null;
$(document).on("mousemove", function () {
  //движение
  if (timeout !== null) {
    clearInterval(nextBackground);
    clearTimeout(timeout);
  }
  //мышь на месте
  nextBackground = setInterval(cycleImages, 5000);
  timeout = setTimeout(function () {}, 3000);
});

//слайдер для img
$("#slider").hide();
function cycleImages() {
//   let hover = $(" li a .hover");
//   let next_li =
//     $("li").next().length > 0
//       ? $("li a .hover").next()
//       : $("li:first a");

//   hover.show().removeClass("hover");
//   next_li.addClass("hover");

  //
  let active = $("#slider .active");
  let next =
    $("#slider .active").next().length > 0
      ? $("#slider .active").next()
      : $("#slider img:first");
  next.css("z-index", -2);
  active.fadeOut(1500, function () {
    active.css("z-index", -3).show().removeClass("active");
    next.css("z-index", -1).addClass("active");
  });
}

$("#slider").fadeIn(1500);

html

<section>
    <div id="slider">
        <img class="active" src="/image/background/transport.jpg" alt="back">
        <img src="/image/background/obshepit.jpg" alt="back">
        <img src="/image/background/sferi_yslug.jpg" alt="back">
        <img src="/image/background/torgovii_kompanii.jpg" alt="back">
        <img src="/image/background/agroprom.jpg" alt="back">
        <img src="/image/background/proizvodstvo.jpg" alt="back">
    </div>
    <main>
        <ul class="navigate">
            <li><a class="hover">для транспорта<img src="/image/mainscl.svg"></a></li>
            <li><a>для общепита</a></li>
            <li><a>для сферы услуг</a></li>
            <li><a>для торговых компаний</a></li>
            <li><a>для сельского хозяйства</a></li>
            <li><a>для производств</a></li>
        </ul>
    </main>
</section>

css

section {
  height: 100vh;
  display: flex;
}
#slider {
  z-index: -4;
  position: absolute;
  width: 100%;
  height: 100%;
}
#slider img {
  position: absolute;
  z-index: -3;
  width: 100%;
  height: 100%;
}

#slider img.active {
  z-index: -1;
}

.catalog_text {
  cursor: pointer;
}

main {
  width: 1200px;
  margin-left: auto;
  margin-right: auto;
}
.navigate li a {
  font-family: Geometria;
  font-style: normal;
  font-weight: bold;
  font-size: 14px;
  line-height: 42px;
  text-transform: uppercase;
  color: #ffffff;
  cursor: pointer;
}

.navigate li a.hover {
  color: #0d9b8a;
}
.navigate {
  margin-top: 300px;
}
.navigate li img {
  vertical-align: middle;
  margin-left: 10px;
}

https://jsfiddle.net/maplol/v48xdqto/1/