Page scroll to id with mousewheel and keyboard

There is a site written width scrollr js pluggin. The example below or another additional link to the same example (https://codepen.io/RukUndead/pen/bXwyZJ) . The task is to make step-by-step scrolling with the mouse wheel by id = slide-1, slide-2, etc. My version does not work correctly. Libraries like Onepage and Malihu are not offered.

var s = skrollr.init();

var slides = [];
var currentslide = -1;
var isAnimating = false;

$(function() {

  function updateslides() {
    slides = [];
    $('.slide').each(function(i, element) {
      slides.push($(element).offset().top);
    });
  }

  $('body').on('mousewheel', function(e) {
    e.preventDefault();
    e.stopPropagation();
    if (isAnimating) {
      return false;
    }
    isAnimating = true;
    // Increase or reset current slide
    if (e.originalEvent.wheelDelta >= 0) {
      currentslide--;
    } else {
      currentslide++;
    }
    if (currentslide > (slides.length - 1) ||
      currentslide < 0) {
      currentslide = 0;
    }
    isAnimating = true;
    $('html, body').animate({
      scrollTop: parseInt(slides[currentslide])
    }, 500, 'swing', function() {
      isAnimating = false;
    });
  });

  updateslides();

});

html,
body {
  width: 100%;
  height: 100%;
}

.caption {
  position: absolute;
  bottom: 5%;
  right: 5%;
  text-align: right;
  color: #fff;
}

p,
h1 {
  margin: 0;
}

h1 {
  margin-bottom: 0.2em;
}

p {
  line-height: 1.333em;
}

#slide-3 .caption {
  left: 5%;
  right: auto;
  color: #47373f;
}

#slide-4 .caption {
  right: auto;
  left: 5%;
  top: 5%;
  bottom: auto;
  color: #47373f;
}


/* full width/height container */

#slides-container {
  width: 100%;
  height: 100%;
  overflow: hidden;
}


/* double the height/width of a viewport */

#slides {
  width: 200%;
  height: 200%;
  position: fixed;
  top: 0;
  left: 0;
}

.slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  height: 50%;
}

#slide-1 {
  background: url('https://ihatetomatoes.net/demos/full-screen-layout-with-skrollr/img/bcg_slide-1.jpg') no-repeat center center;
  background-size: cover;
}


/* Slide 2 goes to the bottom left */

#slide-2 {
  background: url('https://ihatetomatoes.net/demos/full-screen-layout-with-skrollr/img/bcg_slide-2.jpg') no-repeat center center;
  background-size: cover;
  -webkit-transform: translate(0, 100%);
  -ms-transform: translate(0, 100%);
  transform: translate(0, 100%);
}


/* Slide 3 goes to the bottom right */

#slide-3 {
  background: url('https://ihatetomatoes.net/demos/full-screen-layout-with-skrollr/img/bcg_slide-3.jpg') no-repeat center center;
  background-size: cover;
  -webkit-transform: translate(100%, 100%);
  -ms-transform: translate(100%, 100%);
  transform: translate(100%, 100%);
}


/* Slide 4 goes to the top right */

#slide-4 {
  background: url('https://ihatetomatoes.net/demos/full-screen-layout-with-skrollr/img/bcg_slide-4.jpg') no-repeat center center;
  background-size: cover;
  -webkit-transform: translate(100%, 0%);
  -ms-transform: translate(100%, 0%);
  transform: translate(100%, 0%);
}


/* Helper */

#helper {
  position: absolute;
  left: 0;
  top: 0;
  height: 600%;
  width: 20px;
}

.marker {
  height: 25%;
  width: 100%;
}

.red {
  background-color: red;
}

.green {
  background-color: green;
}

.blue {
  background-color: blue;
}

.yellow {
  background-color: yellow;
}

<script src="https://ihatetomatoes.net/demos/full-screen-layout-with-skrollr/js/skrollr.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="page-content">

  <div id="slides-container">
    <div id="slides" data-0="transform:translate(0%,0%);" data-150p="transform:translate(0%,-50%);" data-200p="" data-300p="transform:translate(-50%,-50%);" data-350p="" data-450p="transform:translate(-50%,0%);">
      <div id="slide-1" class="slide">
        <div class="caption" data-40p="opacity: 1; transform:translate(0px,0px);" data-70p="opacity: 0; transform:translate(0px,-100%);" data-anchor-target="#helper">
          <h1>Image 1 Title</h1>
          <p>Image description goes here.</p>
        </div>
      </div>
      <div id="slide-2" class="slide">
        <div class="caption" data-130p="opacity: 0; transform:translate(0px,-200%);" data-180p="opacity: 1; transform:translate(0px,0px);" data-250p="" data-280p="opacity: 0; transform:translate(-100px,0px);" data-anchor-target="#helper">
          <h1>Image 2 Title</h1>
          <p>Image description goes here.</p>
        </div>
      </div>
      <div id="slide-3" class="slide">
        <div class="caption" data-250p="opacity: 0; transform:translate(1500px,0px);" data-300p="opacity: 1; transform:translate(0px,0px);" data-anchor-target="#helper">
          <h1>Image 3 Title</h1>
          <p>Image description goes here.</p>
        </div>
      </div>
      <div id="slide-4" class="slide">
        <div class="caption" data-430p="opacity: 0;" data-450p="opacity: 1;" data-anchor-target="#helper">
          <h1>Image 4 Title</h1>
          <p>Image description goes here.</p>
        </div>
      </div>
    </div>
  </div>

  <div id="helper">
    <div class="marker red"></div>
    <div class="marker green"></div>
    <div class="marker blue"></div>
    <div class="marker yellow"></div>
  </div>
</div>