JSFiddle - React, Tailwind, and code Playground

by maplol

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>
            <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;
}
body {
  width: 100%;
  height: 100%;
  background-color: #333;
}
.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;
}

JavaScript

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

//слайдер для 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);