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

Как сделать чтобы при смене картинки на заднем фоне - слайдер <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
https://jsfiddle.net/maplol/v48xdqto/1/