Как стрелки задействовать в button, чтобы слайдер листался при нажатии на них?

var addEvent = function() {
  return document.addEventListener ? function(a, c, d) {
    if (a && a.nodeName || a === window) a.addEventListener(c, d, !1);
    else if (a && a.length)
      for (var b = 0; b < a.length; b++) addEvent(a[b], c, d)
  } : function(a, c, d) {
    if (a && a.nodeName || a === window) a.attachEvent("on" + c, function() {
      return d.call(a, window.event)
    });
    else if (a && a.length)
      for (var b = 0; b < a.length; b++) addEvent(a[b], c, d)
  }
}();


var carousel = (function() {
  if (document.querySelector) {

    // Initiate any variables needed globally
    var carousel = document.querySelector('.carousel'),
      carouselInner = carousel.querySelector('.carousel-inner'),
      settings = {
        margin: 0.015
      },
      slides = [],
      slideWidth,
      margin,
      direction,
      timeouts = [];


    // Hook for active carousel styling
    carousel.className += " carousel-active";


    var init = function() {
      populateSlides();
      positionSlides();
      addControls();

      addEvent(window, 'resize', function() {
        positionSlides();
      });
    };

    var populateSlides = function() {
      var objs = carouselInner.querySelectorAll('li');

      for (var i = objs.length >>> 0; i--;) {
        slides[i] = objs[i];
      }

      return slides;
    };

    var positionSlides = function() {

      slideWidth = slides[0].offsetWidth;
      margin = slideWidth * settings.margin;


      var carouselWidth = carousel.offsetWidth,
        centerOffset = (carouselWidth - slideWidth) * .5;


      // Center the first slide
      slides[0].style.left = centerOffset + "px";

      // Position the other slides around the first. Position the last slide to the left
      for (var i = 1; i < slides.length; i++) {

        if (i === slides.length - 1 && slides.length > 2) {
          slides[i].style.left = centerOffset - (slideWidth + margin) + "px";
        } else {
          slides[i].style.left = centerOffset + (slideWidth + margin) * i + "px";
        }
      }
    };

    var addControls = function() {
      var prev = document.createElement('button'),
        next = document.createElement('button');

      prev.className = 'carousel-control prev';
      prev.innerHTML = '<img style="width: 30px; z-index: -1;" src="https://image.flaticon.com/icons/png/512/60/60965.png">';

      next.className = 'carousel-control next';
      next.innerHTML = '<img style="width: 30px; z-index: -1;" src="https://img1.pnghut.com/21/17/2/HG0DLvrspQ/symbol-cursor-black-user-interface-button.jpg">';

      carousel.appendChild(prev);
      carousel.appendChild(next);

      addEvent(carousel, 'click', function(e) {
        var target = e.target;

        if (target.tagName == 'BUTTON' && target.className.indexOf('control') !== -1) {
          direction = (target.className.indexOf('next') !== -1) ? 'next' : 'prev';

          moveSlides(direction);
        }
        /* ========= начало изменений ======= */
        else {
          const button = target.closest('button');
          if (button) {
            const direction = (button.className.indexOf('next') !== -1) ? 'next' : 'prev';

            moveSlides(direction);
          }
        }
        /* ========= конец изменений ======= */
      });
    };

    var moveSlides = function(direction) {
      var distance;

      carouselInner.className += ' animate';

      // Move the carouselInner in the right direction
      if (direction === 'prev') {
        distance = slideWidth + margin;

        reorderSlides(direction);
      } else if (direction === 'next') {
        distance = -slideWidth + margin;
      } else {
        distance = 0;
      }

      translate(distance);


      // Clear the timer, reset the positions etc.
      timeouts = [];

      timeouts.push(
        setTimeout(function() {
          stopAnimation();

          if (direction === 'next') {
            reorderSlides(direction);
          }

          translate(0);
          positionSlides();
        }, 300)
      );
    };

    var translate = function(x) {
      carouselInner.style.left = x + "px";
    };

    var stopAnimation = function() {
      carouselInner.className = carouselInner.className.replace(' animate', '');
    };

    var reorderSlides = function(direction) {
      if (direction === 'prev') {
        slides.unshift(slides.pop());
      } else if (direction === 'next') {
        slides.push(slides.shift());
      } else {

      }
    };


    init();
  }
})();

/* Base styling for disabled carousel */

.swiper {
  margin-bottom: 75px;
  margin-top: 20px;
}

.carousel {
  box-sizing: border-box;
  overflow: hidden;
  padding-top: 25%;
  position: relative;
  height: 150px;
}

.carousel-inner {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  list-style: none;
  margin: 0;
  padding: 0;
}

.carousel-inner>li {
  background: rgba(0, 255, 255, 0.2);
  box-sizing: border-box;
  height: 100%;
  margin: 0 auto;
  padding: 1em;
  text-align: center;
}

.carousel-inner>li:nth-child(1) {
  background: rgba(255, 0, 0, 0.2);
}

.carousel-inner>li:nth-child(2) {
  background: rgba(255, 255, 0, 0.2);
}

.carousel-inner>li:nth-child(3) {
  background: rgba(0, 255, 0, 0.2);
}

.carousel-inner>li:nth-child(4) {
  background: rgba(0, 255, 255, 0.2);
}

.carousel-inner>li:nth-child(5) {
  background: rgba(0, 0, 255, 0.2);
}


/* If enabled, carousel has class of carousel-active */

.carousel-active .carousel-inner>li {
  position: absolute;
  width: 70%;
  padding: 0;
}

.carousel-active .carousel-inner.animate {
  transition: left 0.3s linear;
}

.carousel-control {
  transition: background 0.3s linear;
  background: rgba(0, 0, 0, 0.4);
  border: 0;
  color: #fff;
  cursor: pointer;
  padding: 0 1em;
  position: absolute;
  z-index: 2000;
}

.carousel-control:hover,
.carousel-control:focus {
  background: rgba(0, 0, 0, 0.55);
}

.carousel-control.prev {
  top: 0;
  left: 0;
  bottom: 0;
  color: #FE6A4A;
  padding: 0;
  width: 30px;
  background-color: white;
  opacity: 0.7;
  z-index: 999999;
}

.carousel-control.next {
  top: 0;
  right: 0;
  bottom: 0;
  color: #FE6A4A;
  padding: 0;
  width: 30px;
  background-color: white;
  opacity: 0.7;
  z-index: 999999;
}

<!-- Slider main container -->
<div class="swiper">
  <div class="carousel">
    <ul class="carousel-inner">
      <li><img src="https://www.sostav.ru/images/news/2019/04/01/9iithyjt_md.jpg"></li>
      <li><img src="https://www.sostav.ru/images/news/2019/04/01/9iithyjt_md.jpg"></li>
      <li><img src="https://www.sostav.ru/images/news/2019/04/01/9iithyjt_md.jpg"></li>
      <li><img src="https://www.sostav.ru/images/news/2019/04/01/9iithyjt_md.jpg"></li>
      <li><img src="https://www.sostav.ru/images/news/2019/04/01/9iithyjt_md.jpg"></li>
      <li><img src="https://www.sostav.ru/images/news/2019/04/01/9iithyjt_md.jpg"></li>
      <li><img src="https://www.sostav.ru/images/news/2019/04/01/9iithyjt_md.jpg"></li>
      <li><img src="https://www.sostav.ru/images/news/2019/04/01/9iithyjt_md.jpg"></li>
      <li><img src="https://www.sostav.ru/images/news/2019/04/01/9iithyjt_md.jpg"></li>
    </ul>
    <!-- /.carousel-inner -->
  </div>
</div>
<!-- /.carousel -->