JS slider多了一张幻灯片。找不到原因

Question

我有一个滑块，它应该只显示三张幻灯片，但它继续(自动或单击)到第四张空白幻灯片。我不知道在代码中幻灯片的数量是在哪里设置的。会非常感谢一些受过教育的人来看这个。

JS

$(document).ready(function() {
  
  var $slider = $(".slider"),
      $slideBGs = $(".slide__bg"),
      diff = 0,
      curSlide = 0,
      numOfSlides = $(".slide").length-1,
      animating = false,
      animTime = 500,
      autoSlideTimeout,
      autoSlideDelay = 6000,
      $pagination = $(".slider-pagi");
  
  function createBullets() {
    for (var i = 0; i < numOfSlides+1; i++) {
      var $li = $("<li class='slider-pagi__elem'></li>");
      $li.addClass("slider-pagi__elem-"+i).data("page", i);
      if (!i) $li.addClass("active");
      $pagination.append($li);
    }
  };
  
  createBullets();
  
  function manageControls() {
    $(".slider-control").removeClass("inactive");
    if (!curSlide) $(".slider-control.left").addClass("inactive");
    if (curSlide === numOfSlides) $(".slider-control.right").addClass("inactive");
  };
  
  function autoSlide() {
    autoSlideTimeout = setTimeout(function() {
      curSlide++;
      if (curSlide > numOfSlides) curSlide = 0;
      changeSlides();
    }, autoSlideDelay);
  };
  
  autoSlide();
  
  function changeSlides(instant) {
    if (!instant) {
      animating = true;
      manageControls();
      $slider.addClass("animating");
      $slider.css("top");
      $(".slide").removeClass("active");
      $(".slide-"+curSlide).addClass("active");
      setTimeout(function() {
        $slider.removeClass("animating");
        animating = false;
      }, animTime);
    }
    window.clearTimeout(autoSlideTimeout);
    $(".slider-pagi__elem").removeClass("active");
    $(".slider-pagi__elem-"+curSlide).addClass("active");
    $slider.css("transform", "translate3d("+ -curSlide*100 +"%,0,0)");
    $slideBGs.css("transform", "translate3d("+ curSlide*50 +"%,0,0)");
    diff = 0;
    autoSlide();
  }

  function navigateLeft() {
    if (animating) return;
    if (curSlide > 0) curSlide--;
    changeSlides();
  }

  function navigateRight() {
    if (animating) return;
    if (curSlide < numOfSlides) curSlide++;
    changeSlides();
  }

  $(document).on("mousedown touchstart", ".slider", function(e) {
    if (animating) return;
    window.clearTimeout(autoSlideTimeout);
    var startX = e.pageX || e.originalEvent.touches[0].pageX,
        winW = $(window).width();
    diff = 0;
    
    $(document).on("mousemove touchmove", function(e) {
      var x = e.pageX || e.originalEvent.touches[0].pageX;
      diff = (startX - x) / winW * 70;
      if ((!curSlide && diff < 0) || (curSlide === numOfSlides && diff > 0)) diff /= 2;
      $slider.css("transform", "translate3d("+ (-curSlide*100 - diff) +"%,0,0)");
      $slideBGs.css("transform", "translate3d("+ (curSlide*50 + diff/2) +"%,0,0)");
    });
  });
  
  $(document).on("mouseup touchend", function(e) {
    $(document).off("mousemove touchmove");
    if (animating) return;
    if (!diff) {
      changeSlides(true);
      return;
    }
    if (diff > -6 && diff < 6) {
      changeSlides();
      return;
    }
    if (diff <= -6) {
      navigateLeft();
    }
    if (diff >= 6) {
      navigateRight();
    }
  });
  
  $(document).on("click", ".slider-control", function() {
    if ($(this).hasClass("left")) {
      navigateLeft();
    } else {
      navigateRight();
    }
  });
  
  $(document).on("click", ".slider-pagi__elem", function() {
    curSlide = $(this).data("page");
    changeSlides();
  });
  
});

HTML

<div class="slider-container">
  <div class="slider-control left inactive"></div>
  <div class="slider-control right"></div>
  <ul class="slider-pagi"></ul>
  <div class="slider">
    <div class="slide slide-0 active">
      <div class="slide__bg"></div>
      <div class="slide__content">
        <!--<svg class="slide__overlay" viewBox="0 0 720 405" preserveAspectRatio="xMaxYMax slice">
          <path class="slide__overlay-path" d="M0,0 150,0 500,405 0,405" />
        </svg>-->
        <div class="slide__text">
          <h2 class="slide__text-heading"><b>New</b> featured products</h2>
          <h3 class="slide__text-sub-head">Ives<sup>®</sup> hands-free door pulls</h3>
          <p class="slide__text-desc">Ives offers hands-free pulls and door opening tools that enable pedestrians to operate the door with an arm or foot to avoid contacting surfaces with their hands. This is a cost-effective solution for retrofitting high-traffic mechanical applications to hands-free.<br><a class="slide__text-link">Learn More</a></p>
        </div>
      </div>
    </div>
    <div class="slide slide-1 ">
      <div class="slide__bg"></div>
      <div class="slide__content">
        <!--<svg class="slide__overlay" viewBox="0 0 720 405" preserveAspectRatio="xMaxYMax slice">
          <path class="slide__overlay-path" d="M0,0 150,0 500,405 0,405" />
        </svg>-->
        <div class="slide__text">
          <h2 class="slide__text-heading"><b>New</b> featured products</h2>
          <h3 class="slide__text-sub-head">LCN<sup>®</sup> touchless actuators</h3>
          <p class="slide__text-desc">Allegion offers no-touch actuators that are installed in place of push buttons and comply with ANSI 156.19 low energy standards. A pedestrian simply waves a hand in front of the wall plate, the technology senses the motion and acknowledges intent to enter. No contact with the door or hardware is required.<br><a class="slide__text-link">Learn More</a></p>
        </div>
      </div>
    </div>
    <div class="slide slide-2">
      <div class="slide__bg"></div>
      <div class="slide__content">
        <!--<svg class="slide__overlay" viewBox="0 0 720 405" preserveAspectRatio="xMaxYMax slice">
          <path class="slide__overlay-path" d="M0,0 150,0 500,405 0,405" />
        </svg>-->
        <div class="slide__text">
          <h2 class="slide__text-heading"><b>New</b> featured products</h2>
          <h3 class="slide__text-sub-head">Schlage<sup>®</sup> mobile access solutions</h3>
          <p class="slide__text-desc">Schlage Mobile Access Solutions provide comprehensive touchless offering, including mobile enabled multi-technology readers, mobile enabled wireless electronic locks and mobile access credentials.<br><a class="slide__text-link">Learn More</a></p>
        </div>
      </div>
    </div>
  </div>
</div>

蒂娅！

Answer 1

我刚刚尝试了下面的方法，似乎已经纠正了这个问题。

我更改了这一行：

numOfSlides =$(“.slide”)..length 1，

要这样做：

numOfSlides =$(“.slide”)..length 2，

按预期获得理想的now...only 3幻灯片结果。希望代码在根本上是正确的。