Блог

Слайдер работает так, как я хочу, без раздела, который заставляет его работать автоматически:

1. Я хочу, чтобы изображения при нажатии переходили к следующему слайду, который работает с приведенным ниже кодом.
2. Я хочу, чтобы при нажатии на кнопки отображался ползунок для этой кнопки, который работает с приведенным ниже кодом.
3. Я хочу автоматически запустить ползунок, чтобы бесконечно повторять каждый слайд. Код для этого работает (закомментированный бит внизу), но нарушает пункты 1 и 2 выше, когда я применяю / раскомментирую его.

Как я могу заставить все три вышеперечисленных требования работать вместе?

 <div class="container">
  <div id="slider" class="slider">
    <div class="slider-item active">
      <span class="title">Title One</span>
      <img src="images/mozambique-home-1.jpg" alt="" class="img-fluid" />
    </div>
    <div class="slider-item">
      <span class="title">Title Two</span>
      <img src="images/mozambique-home-2.jpg" alt="" class="img-fluid" />
    </div>
    <div class="slider-item">
      <span class="title">Title Three</span>
      <img src="images/mozambique-home-3.jpg" alt="" class="img-fluid" />
    </div>
    <div class="slider-item">
      <span class="title">Title Four</span>
      <img src="images/mozambique-home-4.jpg" alt="" class="img-fluid" />
    </div>
    <ul id="dots" class="list-inline dots"></ul>
  </div>
</div>
 

JS

 <script>
      var slider = document.getElementById("slider");
      var sliderItem = slider.getElementsByTagName("div");
      var dots = document.getElementById("dots");
      var dotsChild = document
        .getElementById("dots")
        .getElementsByTagName("li");
      for (i = 0; i < sliderItem.length; i  ) {
        // console.log("sliderItem: ", i);
        dots.appendChild(document.createElement("li"));
        dotsChild[i].classList.add("list-inline-item");
        dotsChild[i].setAttribute("id", i);
        dotsChild[i].innerHTML = i;
        dotsChild[0].classList.add("active");
        dotsChild[i].addEventListener("click", runSlider);
      }
      function runSlider() {
        var dnum = this.getAttribute("id");
        for (i = 0; i < sliderItem.length; i  ) {
          sliderItem[i].classList.remove("active");
          sliderItem[dnum].classList.add("active");
          dotsChild[i].classList.remove("active");
          dotsChild[dnum].classList.add("active");
        }
      }
      const imageDiv = document.querySelectorAll(".slider-item");
      imageDiv.forEach((el, idx) => {
        el.id = idx;
        el.addEventListener("click", handleClick, true);
      });

      function handleClick(e) {
        let maxImgArray = sliderItem.length;
        let nextImage;
        let id = e.path[1].id;
        id = Number(id);
        nextImage = Number(id   1);
        if (nextImage > maxImgArray - 1) {
          nextImage = 0;
        }
        // console.log("image ID: ", nextImage);
        const slide = document.getElementById(nextImage);
        slide.classList.add("active");
        const prevSlide = document.getElementById(id);
        prevSlide.classList.remove("active");
        dotsChild[id].classList.remove("active");
        dotsChild[nextImage].classList.add("active");
      }

      //   var slideIndex = 0;
      //   showSlides();
      //   function showSlides() {
      //     var i;
      //     var slides = document.querySelectorAll(".slider-item");
      //     for (i = 0; i < slides.length; i  ) {
      //       slides[i].style.display = "none";
      //     }
      //     slideIndex  ;
      //     if (slideIndex > slides.length) {
      //       slideIndex = 1;
      //     }
      //     slides[slideIndex - 1].style.display = "block";
      //     setTimeout(showSlides, 6000); // Change image every 2 seconds
      //   }
    </script>