如何在滚动滑动上逐个循环前进/后退方向和活动的相应指示器？

Question

我试图创建视差类型的滚动幻灯片动画正向和反向。但是我想同时激活各自的指标。如果用户点击指标中的任何一个，那么它应该转到接收幻灯片。但我无法满足该jquery代码。你能不能请我帮帮我。

我的代码笔在这里：

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