滑塊沒有顯示。我認為JS中的元素或活動的z索引可能有問題。

我嘗試了這兩者的每一種組合，但仍然不知道哪里出了問題。我要包含的代碼包含滑塊，其中兩個是窗口小部件(日歷和天氣),它們也有z索引，所以它們應該覆蓋在滑塊上，滑塊是它們的父控件。好像他們不想疊加。

function startSlideshow() {
  const slides = Array.from(document.querySelectorAll('.slide'));
  let currentIndex = 0;

  function showSlide() {
    const nextIndex = (currentIndex + 1) % slides.length;

    slides[currentIndex].classList.remove('active');
    slides[nextIndex].classList.add('active');
    currentIndex = nextIndex;
    toggleWidgets(currentIndex);
    setTimeout(showSlide, 3000);
  }

  slides[currentIndex].classList.add('active');
  showSlide();
}

/* slider */

.swiper-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform 0.5s ease;
}

.slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 0.5s ease;
  z-index: 1;
}

.slide.active {
  opacity: 1;
}

.slider-img {
  width: 100%;
  height: auto;
  z-index: 1;
  position: absolute;
}

.weather-container {
  position: absolute;
  top: 140px;
  left: 275px;
  z-index: 3;
}

.calendar {
  position: absolute;
  top: 150px;
  left: 275px;
  z-index: 3;
}

<div class="swiper-wrapper">
  <div class="slide active">
    <div class="slide-img-container1">
      <img src="photos/slider1.png" class="slider-img">
    </div>
    <div class="weather-container">
      <a class="weatherwidget-io"  data-label_1="CZ?STOCHOWA" data-label_2="WEATHER" data-font="Ubuntu" data-theme="weather_one">CZ?STOCHOWA WEATHER</a>
      <script>
        ! function(d, s, id) {
          var js, fjs = d.getElementsByTagName(s)[0];
          if (!d.getElementById(id)) {
            js = d.createElement(s);
            js.id = id;
            js.src = 'https://weatherwidget.io/js/widget.min.js';
            fjs.parentNode.insertBefore(js, fjs);
          }
        }(document, 'script', 'weatherwidget-io-js');
      </script>
    </div>
  </div>
  <div class="slide">
    <img src="photos/slider3.png" class="slider-img">
  </div>
  <div class="slide">
    <img src="photos/slider4.png" class="slider-img">
  </div>
  <div class="slide">
    <div class="slide-img-container2">
      <img src="photos/slider2.png" class="slider-img">
    </div>
    <div class="calendar">
      <a ><img src="photos/calendar.png"></a>
    </div>
  </div>
  <div class="slide">
    <img src="photos/slider5.png" class="slider-img">
  </div>
</div>