如何将指标与滑块连接并将最后一个图像留在滑块

Question

我正在尝试开发一个简单的滑块但遇到问题。 1）我正在尝试将指标与滑块连接，但它没有采取任何措施。 2）我在滑块中添加了3个图像，但在第4部分中，我得到了空白页。

你能帮助我吗？

＆＃13;

＆＃13;

$(document).ready(function() {
  $('#slider').on('.carousel', function() {
    $holder = $("ol li.active");
    $holder.removeClass('active');
    var idx = $('div.active').index('div.slide');
    $('ol.indicators li[data-slide-to="' + idx + '"]').addClass('active');
  });

  $('ol.indicators  li').on("click", function() {
    $('ol.indicators li.active').removeClass("active");
    $(this).addClass("active");
  });
});

＆＃13;

/*slider*/

@keyframes slider {
  0% { left: 0; }
  20% { left: 0; }
  25% { left: -100%; }
  45% { left: -100%; }
  50% { left: -200%; }
  70% { left: -200%; }   
  75% { left: -300%; }
  95% { left: -400%; }
  100% { left: -400%; }
}
#slider {
  overflow: hidden;
}
#slider figure img {
  width: 20%;
  float: left;
}
#slider figure {
  position: relative;
  width: 500%;
  margin: 0;
  left: 0;
  text-align: left;
  font-size: 0;
  animation: 20s slider infinite;
}
.indicators {
  position: absolute;
  bottom: 10px;
  left: 50%;
  z-index: 15;
  width: 60%;
  padding-left: 0;
  margin-left: -30%;
  text-align: center;
  list-style: none;
  margin-bottom: 6%;
}
.indicators li {
  display: inline-block;
  width: 10px;
  height: 10px;
  margin: 1px;
  text-indent: -999px;
  cursor: pointer;
  background-color: #000\9;
  background-color: rgba(0, 0, 0, 0);
  border: 1px solid #fff;
  border-radius: 10px;
}
.indicators .active {
  width: 12px;
  height: 12px;
  margin: 0;
  background-color: #fff;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

<div id="slider">
  <ol class="indicators">
    <li data-target="#slider" data-slide-to="0" class="myCarousel-target active"></li>
    <li data-target="#slider" data-slide-to="1" class="myCarousel-target"></li>
    <li data-target="#slider" data-slide-to="2" class="myCarousel-target"></li>
  </ol>

  <figure>
    <div id="slider" data-ride="carousel" class="carousel">
      <div data-slide-no="0" class="slide active">
        <img src="https://s-media-cache-ak0.pinimg.com/originals/5b/14/bf/5b14bf0a8ded1ad77df5e748afb2c5c4.jpg">
      </div>
      <div data-slide-no="1" class="slide">
        <img src="https://static.pexels.com/photos/9488/nature-flowers-pattern-circle.jpg">
      </div>
      <div data-slide-no="2" class="slide">
        <img src="http://www.greatindex.net/images/www.imgion.com/images/01/Natural-Flower-.jpg">
      </div>
    </div>
  </figure>
  </div>

＆＃13;

＆＃13;

＆＃13;