After second slide indicator next slide indicator not activate

问题

Can you find out what's wrong with below jquery code. I created Mouse wheel horizontal scroll slider and when scrolling all slides scrolls well and 2nd indicator div activate but not next 3 and 4.

$('.slide-container').on('mousewheel DOMMouseScroll', function(event){
            var delta = Math.max(-1, Math.min(1, (event.originalEvent.wheelDelta || -event.originalEvent.detail)));
            $(this).animate({scrollLeft:( $(this).scrollLeft() - ( delta * $('.slide').innerWidth() ) )},400, 'easeInCirc');
            event.preventDefault();
            
            var $numbers = $('.indicator').children();
            var $slides = $('.slide');
            var numSlides = $slides.length;
            var currentSlide = 0;
            
            currentSlide = (currentSlide + 1) % numSlides;
            var $target = $slides.eq(currentSlide);
            $numbers.eq(currentSlide).addClass('active').siblings().removeClass('active');
        });

body {
            font-family: 'Roboto', sans-serif;
            overflow: hidden;
            border: 1px solid black;
            
        }
        * {margin: 0; padding: 0;}
        
        .header {
            position: fixed;
            width: 100%;
            text-align: center;
            background: yellow;
        }
        
        .horizontal-scroll-section {
            width: 100%;
            height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .slide-container {
            display: flex;
            width: 90%;
            height: 80%;
            overflow-x: hidden;
            scroll-snap-type: X proximity;
        }
        .slide {
            flex: 0 0 100%;
            height: 100%;
            font-size: 36px;
        }
        .slide:nth-child(odd){background: red;}
        .slide:nth-child(even){background: blue;}
        
        .indicator {
            position: absolute;
            top: 50%;
            left: 10px;
            color: black;
        }
        .indicator div {opacity: .5;}
        .indicator div.active {opacity: 1;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="continer">
        <div class="header">
            <h1 class="title"> Horizontal Scrolling </h1>
            <span>(Use Mousewheel)</span>
        </div>
        
    
        <div class="horizontal-scroll-section">
            <div class="slide-container">
                <div class="slide">A</div>
                <div class="slide">B</div>
                <div class="slide">C</div>
                <div class="slide">D</div>
                <div class="slide">E</div>
            </div>
        </div>
        
        <span class="indicator">
            <div class="active">1</div>
            <div>2</div>
            <div>3</div>
            <div>4</div>
        </span>
        
    </div><!--container ends here-->

Can you find out what's wrong with below jquery code. I created Mouse wheel horizontal scroll slider and when scrolling all slides scrolls well and 2nd indicator div activate but not next 3 and 4.

回答1:

You can use delta value because it return -1 or 1 depending on scroll down or up. So, using this if value is -1 add 1 to index value of div which is active else subtract then use this to add active class to your indicator div.

Demo Code :

$('.slide-container').on('mousewheel DOMMouseScroll', function(event) {
  var delta = Math.max(-1, Math.min(1, (event.originalEvent.wheelDelta || -event.originalEvent.detail)));
  $(this).animate({
    scrollLeft: ($(this).scrollLeft() - (delta * $('.slide').innerWidth()))
  }, 200, 'easeInCirc');
  event.preventDefault();
  var $numbers = $('.indicator').children();
  //check delta value 1 or -1
  var count = (delta == -1) ? $(".indicator .active").index() + 1 : $(".indicator .active").index() - 1;
  //if count is less then divs and not -1
  if (count < $('.indicator').children().length && count != -1) {
    //add active class there
    $numbers.eq(count).addClass('active').siblings().removeClass('active');
  }
});

body {
  font-family: 'Roboto', sans-serif;
  overflow: hidden;
  border: 1px solid black;
}

* {
  margin: 0;
  padding: 0;
}

.header {
  position: fixed;
  width: 100%;
  text-align: center;
  background: yellow;
}

.horizontal-scroll-section {
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.slide-container {
  display: flex;
  width: 90%;
  height: 80%;
  overflow-x: hidden;
  scroll-snap-type: X proximity;
}

.slide {
  flex: 0 0 100%;
  height: 100%;
  font-size: 36px;
}

.slide:nth-child(odd) {
  background: red;
}

.slide:nth-child(even) {
  background: blue;
}

.indicator {
  position: absolute;
  top: 50%;
  left: 10px;
  color: black;
}

.indicator div {
  opacity: .5;
}

.indicator div.active {
  opacity: 1;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.4.1/jquery.easing.min.js"></script>
<div class="continer">
  <div class="header">
    <h1 class="title"> Horizontal Scrolling </h1>
    <span>(Use Mousewheel)</span>
  </div>


  <div class="horizontal-scroll-section">
    <div class="slide-container">
      <div class="slide">A</div>
      <div class="slide">B</div>
      <div class="slide">C</div>
      <div class="slide">D</div>
      <div class="slide">E</div>
    </div>
  </div>

  <span class="indicator">
            <div class="active">1</div>
            <div>2</div>
            <div>3</div>
            <div>4</div>
            <div>5</div>
        </span>

</div>

来源：https://stackoverflow.com/questions/65760564/after-second-slide-indicator-next-slide-indicator-not-activate