How can I scroll the slide in one direction forward / backward and the active corresponding indicator?

Question

I am trying to create a parallax type animation scroll forward and backward. However, I would like to activate the corresponding indicator at the same time. And if the user clicks on any of the indicators, so he must go to the receptive slide. But I can not satisfy this jquery code. could you help me for this.

My code pen is here:

http://codepen.io/jahagirdar/pen/XXmZaq?editors=001

HTML:

<div class="palarrax-wrp">
  <div class="parallax-indicator">
    <ul>
      <li class="indicator active"> <a> 1</a></li>
      <li class="indicator"> <a> 2</a></li>
      <li class="indicator"> <a> 3</a></li>
      <li class="indicator"> <a> 4</a></li>

      <ul>
  </div>

  <div class="parallax-content">
    <div class="para-screen-box">
    <div class="parallax-slide para-slide1 active">
        <img src="https://www.ipekyol.com.tr/Content/img/lookbook/64.jpg">
      </div>
      <div class="parallax-slide para-slide2">
        <img src="https://www.ipekyol.com.tr/Content/img/lookbook/65.jpg">
      </div>
      <div class="parallax-slide para-slide3">
        <img src="https://www.ipekyol.com.tr/Content/img/lookbook/66.jpg">
      </div>
      <div class="parallax-slide para-slide4">
        <img src="https://www.ipekyol.com.tr/Content/img/lookbook/67.jpg">
      </div>
    </div>
  </div>

JavaScript:

$(".para-screen-box").on("scroll", function() {
  var $ScrollEle = $(".para-screen-box");
  var $ScrollTOP = $(".para-screen-box").scrollTop();
  var $scroll = $(".para-screen-box").scrollTop();
  var $paraActive = $(".parallax-slide.active");
  var $paraActiveNxtpos = $(".parallax-slide.active").next(".parallax-slide").offset();
  var $paraActivePos = $(".parallax-slide.active").offset();

  function nxtSlide() {
    if ( $paraActive.next(".parallax-slide") && $ScrollTOP >  $paraActivePos.top && $ScrollTOP < $paraActiveNxtpos.top) {
      $ScrollEle.animate({
        scrollTop: $paraActiveNxtpos.top
      },500, function(){
        $paraActive.removeClass("active");
        $paraActive.next(".parallax-slide").addClass("active");

        nxtSlide();
      });

    }
  }
  nxtSlide();
})

CSS

/* reset */

html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
dl,
dt,
dd,
ol,
nav ul,
nav li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
  display: block;
}

ol,
ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

blockquote,
q {
  quotes: none;
}

blockquote:before,
blockquote:after,
q:before,
q:after {
  content: '';
  content: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

a {
  text-decoration: none;
}

.txt-rt {
  text-align: right;
}
/* text align right */

.txt-lt {
  text-align: left;
}
/* text align left */

.txt-center {
  text-align: center;
}
/* text align center */

.float-rt {
  float: right;
}
/* float right */

.float-lt {
  float: left;
}
/* float left */

.clear {
  clear: both;
}
/* clear float */

.pos-relative {
  position: relative;
}
/* Position Relative */

.pos-absolute {
  position: absolute;
}
/* Position Absolute */

.vertical-base {
  vertical-align: baseline;
}
/* vertical align baseline */

.vertical-top {
  vertical-align: top;
}
/* vertical align top */

.underline {
  padding-bottom: 5px;
  border-bottom: 1px solid #eee;
  margin: 0 0 20px 0;
}
/* Add 5px bottom padding and a underline */

nav.vertical ul li {
  display: block;
}
/* vertical menu */

nav.horizontal ul li {
  display: inline-block;
}
/* horizontal menu */

img {
  width: 100%;
}
/*end reset*/

body {
  font-family: 'Roboto', sans-serif;
  background: #ffffff;
  font-size: 100%;
  overflow:hidden;
}
/* Main css start */

.parallax-indicator {
  display: block;
  position: fixed;
  right: 15px;
  top: 150px;
  z-index: 99;
}

.parallax-indicator li a {
  color:#0EBEFF;
  text-shadow: 1px 1px 1px #000000;
}

.parallax-indicator li.active a {
  color:red;
  text-shadow: 1px 1px 1px #000000;
  font-size: 20px;
}
.para-screen-box {
  height:440px;
  overflow-y:scroll;

}
/* Main css End */