Как сделать этот слайдер автоматическим? - PullRequest
0 голосов
/ 28 мая 2019

Я создаю слайдер карусели с этим кодом, но я не могу понять, как сделать этот слайдер автоматически скользящим. Что мне нужно, чтобы этот слайдер автоматически скользил?

    class Slider {
      constructor(props) {
        this.rootElement = props.element;
        this.slides = Array.from(
          this.rootElement.querySelectorAll(".slider-list__item")
        );
        this.slidesLength = this.slides.length;
        this.current = 0;
        this.isAnimating = false;
        this.direction = 1; // -1

        this.navBar = this.rootElement.querySelector(".slider__nav-bar");
        this.thumbs = Array.from(this.rootElement.querySelectorAll(".nav-control"));
        this.prevButton = this.rootElement.querySelector(".slider__arrow_prev");
        this.nextButton = this.rootElement.querySelector(".slider__arrow_next");

        this.slides[this.current].classList.add("slider-list__item_active");
        this.thumbs[this.current].classList.add("nav-control_active");

        this._bindEvents();
      }

      goTo(index, dir) {
        if (this.isAnimating) return;
        var self = this;
        let prevSlide = this.slides[this.current];
        let nextSlide = this.slides[index];

        self.isAnimating = true;
        self.current = index;
        nextSlide.classList.add("slider-list__item_active");

      }

      goStep(dir) {
        let index = this.current + dir;
        let len = this.slidesLength;
        let currentIndex = (index + len) % len;
        this.goTo(currentIndex, dir);
      }

      goNext() {
        this.goStep(1);
      }

      goPrev() {
        this.goStep(-1);
      }

      _navClickHandler(e) {
        var self = this;
        if (self.isAnimating) return;
        let target = e.target.closest(".nav-control");
        if (!target) return;
        let index = self.thumbs.indexOf(target);
        if (index === self.current) return;
        let direction = index > self.current ? 1 : -1;
        self.goTo(index, direction);
      }

      _bindEvents() {
        var self = this;
        ["goNext", "goPrev", "_navClickHandler"].forEach(method => {
          self[method] = self[method].bind(self);
        });
        self.nextButton.addEventListener("click", self.goNext);
        self.prevButton.addEventListener("click", self.goPrev);
        self.navBar.addEventListener("click", self._navClickHandler);
      }
    }

    // ===== init ======
    let slider = new Slider({
      element: document.querySelector(".slider")
    });

Я также пытался добавить этот код в файл js и добавить mySlides и класс точек в слайдер. Но все еще не работает

    var slideIndex = 0;
    showSlides();

    function showSlides() {
      var i;
      var slides = document.getElementsByClassName("mySlides");
      var dots = document.getElementsByClassName("dot");
      for (i = 0; i < slides.length; i++) {
        slides[i].style.display = "none";  
      }
      slideIndex++;
      if (slideIndex > slides.length) {slideIndex = 1}    
      for (i = 0; i < dots.length; i++) {
        dots[i].className = dots[i].className.replace(" active", "");
      }
      slides[slideIndex-1].style.display = "block";  
      dots[slideIndex-1].className += " active";
      setTimeout(showSlides, 2000); // Change image every 2 seconds
    }

Вот HTML-код слайдера,

            <div class="slider">

              <ul class="slider-list">

                <li class="mySlides slider-list__item  ">
                  <span class="back__element">
                    <img src="assets/img/back_mango_002.png" />
                  </span>
                  <span class="main__element">
                    <img src="assets/img/bottle_mango_002.png" />
                  </span>
                  <span class="front__element">
                    <img src="assets/img/front_mango_002.png" />
                  </span>
                  <span class="title__element">
                    <span class="title">mango</span>
                  </span>
                  <span class="more__element">
                    <span class="content">
                      <span class="headline">mango</span>
                      <span class="excerpt">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Illo ratione nisi perferendis? Nemo in accusamus cupiditate officiis.</span>
                      <span class="link">
                        <div class="fill"></div>
                        <a href="#">Open catalog</a>
                      </span>
                    </span>
                  </span>
                 </li>

                <li class="mySlides slider-list__item">
                  <span class="back__element">
                    <img src="assets/img/back_bananas_001.png" />
                  </span>
                  <span class="main__element">
                    <img src="assets/img/bottle_bananas_001.png" />
                  </span>
                  <span class="front__element">
                    <img src="assets/img/front_bananas_001.png" />
                  </span>
                  <span class="title__element">
                    <span class="title">bananas</span>
                  </span>
                  <span class="more__element">
                    <span class="content">
                      <span class="headline">bananas</span>
                      <span class="excerpt">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Illo ratione nisi perferendis? Nemo in accusamus cupiditate officiis.</span>
                      <span class="link">
                        <div class="fill fill-dark"></div>
                        <a href="#">Open catalog</a>
                      </span>
                    </span>
                  </span>
                 </li>

                 <li class="mySlides slider-list__item">
                  <span class="back__element">
                    <img src="assets/img/back_oranges_003.png" />
                  </span>
                  <span class="main__element">
                    <img src="assets/img/bottle_oranges_003.png" />
                  </span>
                  <span class="front__element">
                    <img src="assets/img/front_oranges_003.png" />
                  </span>
                  <span class="title__element">
                    <span class="title">oranges</span>
                  </span>
                  <span class="more__element">
                    <span class="content">
                      <span class="headline">oranges</span>
                      <span class="excerpt">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Illo ratione nisi perferendis? Nemo in accusamus cupiditate officiis.</span>
                      <span class="link">
                          <div class="fill"></div>
                        <a href="#">Open catalog</a>
                      </span>
                    </span>
                  </span>
                 </li>

              </ul>

              <div class="slider__nav-bar">
                <a class="dot nav-control"></a>
                <a class="dot nav-control"></a>
                <a class="dot nav-control"></a>
              </div>

              <div class="slider__controls">
                <a class="slider__arrow slider__arrow_prev"></a>
                <a class="slider__arrow slider__arrow_next"></a>
              </div>

            </div>     

Я ожидаю, что ползунок будет автоматически скользить, когда я добавлю класс mySlides и dot, но вместо этого он просто мигает

1 Ответ

0 голосов
/ 28 мая 2019

Как предложил Bibberty, вам просто нужно setInterval для вашего слайдера.

setInterval(showSlides, 2000); // Change image every 2 seconds

    function showSlides() {
      var i;
      var slides = document.getElementsByClassName("mySlides");
      var dots = document.getElementsByClassName("dot");
      for (i = 0; i < slides.length; i++) {
        slides[i].style.display = "none";
      }
      slideIndex++;
      if (slideIndex > slides.length) {slideIndex = 1}
      for (i = 0; i < dots.length; i++) {
        dots[i].className = dots[i].className.replace(" active", "");
      }
      slides[slideIndex-1].style.display = "block";
      dots[slideIndex-1].className += " active";
    }
...