左右按钮切换的时候卡住了

相关代码：

* {
  padding: 0;
  margin: 0;
}
a {
  text-decoration: none;
  outline: none;
}
img {
  vertical-align: top;
}

.slider-layout {
  width: 80%;
  height: 420px;
  margin: 0 auto;
}

.slider,
.slider-content,
.slider-item,
.slider-img {
  width: 100%;
  height: 100%;
  position: relative;
}
.slider {
  overflow: hidden;
}
.slider-item {
  float: left;
}
.slider-animation {
  transition-property: transform;
  transition-duration: 0ms;
}
.right-bnt{
  width: 32px;
  height: 44px;
  position:absolute;
  right: 0;
  top: 50%;
  margin-top: -22px;
}
.left-bnt{
  width: 32px;
  height: 44px;
  position:absolute;
  left: 0;
  top: 50%;
  margin-top: -22px;
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Class 的应用</title>
    <link rel="stylesheet" href="./slider.css" />
  </head>
  <body>
    <div class="slider-layout">
      <div class="slider">
        <div class="slider-content">
          <div class="slider-item">
            <a href="javascript:;"
              ><img src="./imgs/1.jpg" alt="1" class="slider-img"
            /></a>
          </div>
          <div class="slider-item">
            <a href="javascript:;"
              ><img src="./imgs/2.jpg" alt="1" class="slider-img"
            /></a>
          </div>
          <div class="slider-item">
            <a href="javascript:;"
              ><img src="./imgs/3.jpg" alt="1" class="slider-img"
            /></a>
          </div>
          <div class="slider-item">
            <a href="javascript:;"
              ><img src="./imgs/4.jpg" alt="1" class="slider-img"
            /></a>
          </div>
        </div>
        <div class="right-bnt" id="right-bnt">
            <a href="">
              <img src="./imgs/right-bnt.png" alt="">
            </a>
        </div>
        <div class="left-bnt" id="left-bnt">
            <a href="">
              <img src="./imgs/left-bnt.png" alt="">
            </a>
        </div>
      </div>
    </div>

    <script src="./base.js"></script>
    <script>
      const slider=document.querySelector('.slider');
      const r_bnt=document.getElementById('right-bnt');
      const l_bnt=document.getElementById('left-bnt');

      class Slider extends BaseSlider {
        constructor(el, options) {
          super(el, options);
          this._bindEvent();
        }

        _bindEvent() {
          l_bnt.addEventListener('click', () => {
              this.prev();
          });
          r_bnt.addEventListener('click', () => {
              this.next();
          });
        };
      };
      new Slider(slider, {
        initialIndex: 2,
        animation: true,
        speed: 2000
      });
    </script>
  </body>
</html