简单的JavaScript / jQuery图像滑块

Question

我正在尝试制作一个图片滑块，它会将第1步滑动到 - ＆gt;子步骤1 - >子步骤2 - ＆gt;子步骤3 - ＆gt;步骤1（右箭头）和后退（左箭头）从步骤1到 - >子步骤3 - ＆gt;子步骤2 ---＆gt;子步骤1 - >步骤1 我已经制作了一个jQuery代码（您可以通过访问下面的jsfiddle链接看到它），但它不能正常工作，也非常滞后和错误。 如果您要更正现有代码或提供新代码，我将不胜感激。

谢谢。

https://jsfiddle.net/4j58q930/

.step__arrows {
  position: absolute;
  width: 300px;
  padding: 19px 0px;
  margin-top: 128px;
  z-index: 1;
}
.step__arrows__previous {
  width: 71px;
  height: 67px;
  float: left;
  background-image: url('http://rockerbox.com/assets/img/general/left-arrow.png');
  background-repeat: no-repeat;
  background-position: 50% 50%;
}
.step__arrows__next {
  width: 72px;
  height: 67px;
  float: right;
  background-image: url('http://rockerbox.com/assets/img/general/right-arrow.png');
  background-repeat: no-repeat;
  background-position: 50% 50%;
}
.step__arrows__previous:hover {
  background-color: rgba(255, 255, 255, .2);
  cursor: pointer;
  -webkit-border-radius: 0px 4px 4px 0px;
  -moz-border-radius: 0px 4px 4px 0px;
  border-radius: 0px 4px 4px 0px;
}
.step__arrows__next:hover {
  background-color: rgba(255, 255, 255, .2);
  cursor: pointer;
  -webkit-border-radius: 4px 0px 0px 4px;
  -moz-border-radius: 4px 0px 0px 4px;
  border-radius: 4px 0px 0px 4px;
}
.step__info {
  position: absolute;
  bottom: 0;
}
.step__a {
  color: #fff;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  -webkit-border-radius: 28px;
  -moz-border-radius: 28px;
  border-radius: 28px;
  display: inline-block;
  background: #ff4e50;
  margin-left: 21px;
  font-weight: normal;
  text-decoration: none;
  width: 70px;
  height: 20px;
  line-height: 21px;
  text-align: center;
}
.step__a:hover {
  background: #3cb0fd;
}
.step__h2 {
  color: #fff;
  font-size: 24px;
  padding: 15px 19px 9px 19px;
  margin: 0;
  font-weight: bold;
}
.step__p {
  color: #ccc;
  margin: 0;
  padding: 0px 24px 15px 19px;
  font-size: 14px;
  font-family: Roboto;
  font-weight: 300;
  line-height: 1.3em;
}
.step__1 {
  float: left;
  width: 300px;
  height: 400px;
  background-image: url('http://images.askmen.com/responsive/channels/cars/car_tips.jpg');
  background-size: cover;
  position: relative;
}
.slider__1 ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.slider__1 ul li {
  margin: 0;
  padding: 0;
}
.slider__1 {
  float: left;
  width: 300px;
  height: 400px;
  position: relative;
}
.substep__1 {
  float: right;
  width: 300px;
  height: 400px;
  background-image: url('http://static2.consumerreportscdn.org/content/dam/cro/cars/sports/buying_lg_sports_cars.jpg');
  background-size: cover;
  position: relative;
}
.substep__2 {
  float: right;
  width: 300px;
  height: 400px;
  background-image: url('http://i.kinja-img.com/gawker-media/image/upload/texbia6a0wfjdclbjlrw.jpg');
  background-size: cover;
  position: relative;
}
.substep__3 {
  float: right;
  width: 300px;
  height: 400px;
  background-image: url('http://indianautosblog.com/wp-content/uploads/2013/12/2015-Ford-Mustang-front-three-quarters-3-leaked-press-shot.jpg');
  background-size: cover;
  position: relative;
}

<div class="slider__1">
  <div class="step__arrows">
    <span class="step__arrows__previous"></span>
    <span class="step__arrows__next"></span>
  </div>

  <ul>
    <li class="step__1">
      <div class="step__info">
        <a class="step__a" href="#">Step 1</a>
        <h2 class="step__h2">Lorem ipsum dolor sit amet,</h2>
        <p class="step__p">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</p>
      </div>
    </li>
    <li class="substep__1">
      <div class="step__info">
        <a class="step__a" href="#">Substep 1</a>
        <h2 class="step__h2">In enim justo</h2>
        <p class="step__p">Quisque libero libero, dictum non turpis in, luctus semper lorem. Donec rhoncus a leo sit amet facilisis.</p>
      </div>
    </li>
    <li class="substep__2">
      <div class="step__info">
        <a class="step__a" href="#">Substep 2</a>
        <h2 class="step__h2">Nullam dictum</h2>
        <p class="step__p">Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum.</p>
      </div>
    </li>
    <li class="substep__3">
      <div class="step__info">
        <a class="step__a" href="#">Substep 3</a>
        <h2 class="step__h2">Aenean vulputate</h2>
        <p class="step__p">Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus.</p>
      </div>
    </li>
  </ul>
</div>