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

Question

Как сделать так, чтобы класс hover присваивался к определенному <li>, при смене картинки (слайдер), и добавлялся <img src="/image/mainscl.svg"> в этот <li>.

А так же, при наведении мыши на какой-нибудь <li>, к нему добавлялся этот класс и <img src="/image/mainscl.svg">, а на заднем фоне менялась картинка под этот <li>. И если мышь на месте, то спустя 5 секунд, слайдер продолжал движение.

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

Я написал некоторый код, в котором идёт смена картинки на заднем фоне, если не двигается мышь. Но не знаю как сделать остальное.

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

//слайдер для заднего фона
$("#slider").hide();

function cycleImages() {
  //////// не знаю как менять li
  //   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);

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;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section>
  <div id="slider">
    <img class="active" src="/image/1.jpg" alt="back">
    <img src="/image/2.jpg" alt="back">
    <img src="/image/3.jpg" alt="back">
    <img src="/image/4.jpg" alt="back">
    <img src="/image/5.jpg" alt="back">
    <img src="/image/6.jpg" alt="back">
  </div>
  <main>
    <ul class="navigate">
      <li><a class="hover">1<img src="/image/mainscl.svg"></a></li>
      <li><a>2</a></li>
      <li><a>3</a></li>
      <li><a>4</a></li>
      <li><a>5</a></li>
      <li><a>6</a></li>
    </ul>
  </main>
</section>

БЛОГ НА HUSL

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

Ответы (0 шт):