JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-mousewheel/3.1.12/jquery.mousewheel.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/velocity/1.2.2/velocity.min.js"></script>
<div class="content">
    <div class="slider" id="slider_0">
simple
    </div>
    <div class="slider" id="slider_1">
debounce
    </div>
    <div class="slider" id="slider_2">
hasPeaks
    </div>
</div>

CSS

.content {}
.slider {margin:10px; width:200px; height:300px; overflow:hidden; border:1px solid #000; position: relative; float:left;}

.slide {width:200px; height:300px; position: absolute; top:0;}
.slide_0 {background:red;}
.slide_1 {background:blue;}
.slide_2 {background:orange;}
.slide_3 {background:purple;}
.slide_4 {background:gray;}
.slide_5 {background:yellow;}
.slide_6 {background:pink;}
.slide_7 {background:brown;}
.slide_8 {background:green;}
.slide_9 {background:aqua;}

JavaScript

(function() {
    var slider = new Slider($('#slider_0'));
    $('#slider_0').on('mousewheel', function(event) {
        event.preventDefault();
        if (event.deltaY>0) {
            slider.prevSlide();
        } else {
            slider.nextSlide();
        }
    });
})();

(function() {
    var slider = new Slider($('#slider_1'));
    $('#slider_1').on('mousewheel', {mousewheel:{debounce: {leading: true, trailing: false, preventDefault: true, maxDelay: 1000}}}, function(event) {
        event.preventDefault();
        if (event.deltaY>0) {
            slider.prevSlide();
        } else {
            slider.nextSlide();
        }
    });
})();


(function() {
    var slider = new Slider($('#slider_2'));
    var deltas = [null, null, null, null, null, null, null, null, null], lock= 0;
    
    function hasPeak() {
        if (lock > 0) {lock--; return false;}
        if (deltas[0] == null) return false;
        if (deltas[0] <  deltas[4] && deltas[1] <= deltas[4] && deltas[2] <= deltas[4] && deltas[3] <= deltas[4] && deltas[5] <= deltas[4] && deltas[6] <= deltas[4] && deltas[7] <= deltas[4] && deltas[8] <  deltas[4]
        ) return true;
        return false;
    }
    
    function fire(event) {
        
         if (event.deltaY>0) {
            slider.prevSlide();
        } else {
            slider.nextSlide();
        }   
    }
    
    $('#slider_2').on('mousewheel DOMMouseScroll', function(e) {
        e.preventDefault();
        var delta  = e.type == 'mousewheel' ? e.originalEvent.wheelDelta * -1 : 40 * e.originalEvent.detail;
        if (hasPeak()) {
            lock = 10;
            fire(e);
        } else if ((deltas[8] == null || deltas[8] == 120) && Math.abs(delta) == 120)
            fire(e);
        deltas.shift();
        deltas.push(Math.abs(delta));
    });
    
})();
    


function Slider($slider) {
    var slide = 0;
    var allowScroll = true;
    
    this.prevSlide = function() {
        if (allowScroll) {
            $slide =...