为什么此图片滑块无法响应并受到约束？

Question

为什么当我有正确的代码时图像滑块没有响应？

我正在使用html，css和jquery创建一个图像滑块。 下面是代码：

$(document).ready(function() {
  $('.next').on('click', function() {
    var currentImg = $('.active');
    var nextImg = currentImg.next();

    if (nextImg.length) {
      currentImg.removeClass('active').css('z-index', -10);
      nextImg.addClass('active').css('z-index', 10)
    }
  });

  $('.prev').on('click', function() {
    var currentImg = $('.active');
    var prevImg = currentImg.prev();

    if (prevImg.length) {
      currentImg.removecLASS('active').css('z-index', -10);
      prevImg.addClass('active').css('z-index', 10)
    }
  });
});

.container1 {
  width: 540px;
  margin: 40px auto;
  overflow: auto;
}

.slider-inner {
  width: 500px;
  height: 300px;
  position: relative;
  overflow: hidden;
  float: left;
  padding: 3px;
  border: #666 solid 1px;
}

.slider-inner img {
  display: none;
  width 500px;
  height: 300px;
}

.slider-inner img.active {
  display: inline-block;
}

.prev,
.next {
  float: left;
  margin-top: 130px;
  cursor: pointer;
}

.prev {
  position: relative;
  margin-right: -45px;
  z-index: 100;
}

.next {
  position: relative;
  margin-left: -45px;
  z-index: 100;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="container1">
  <h1>Snaps</h1>
  <div class="slider-outer">
    <img src="images/arrow-left.png" class="prev" alt="Prev">
    <div class="slider-inner">
      <img src="snap1-min.jpg" alt="rosetta on sunset ave." height="666" width="1000" class="active">
      <img src="snap2-min.jpg" alt="rosetta on sunset ave." height="666" width="1000">
      <img src="snap4-min.jpg" alt="rosetta on sunset ave." height="666" width="1000">
      <img src="snap5-min.jpg" alt="rosetta on sunset ave." height="666" width="1000">
      <img src="snap6-min.jpg" alt="rosetta on sunset ave." height="666" width="1000">
      <img src="snap7-min.jpg" alt="rosetta on sunset ave." height="666" width="1000">
      <img src="snap8-min.jpg" alt="rosetta on sunset ave." height="666" width="1000">
      <img src="snap9-min.jpg" alt="rosetta on sunset ave." height="666" width="1000">
      <img src="snap10-min.jpg" alt="rosetta on sunset ave." height="666" width="1000">
    </div>
    <img src="images/arrow-right.png" class="next" alt="Next">
  </div>
</div>

我检查过，经过双重检查和三重检查，我似乎无法弄清楚为什么它没有响应。另外，为什么它被限制在盒子里？我有垂直和水平的图片，我希望他们的真实尺寸显示，但他们似乎都被限制为矩形代码，这个新手无法弄清楚他写的是什么让他们这样做。我知道你们都很忙，所以任何解决方案/建议/见解都会受到赞赏。谢谢！