How can I make on scroll slide one by one cycle forward /reverse direction and active respective indicator?

Question

I'm trying to create parallax kind of scroll slide animation forward and reverse direction. However i would like to active respective indicator at the same time. And if user click on any one of indicator so it should go to receptive slide.But I am not able to meet that jquery code. could you please help Me out for this same.

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 */