如何在此幻灯片放映的内部和前面添加此箭头？

Question

我想在幻灯片中添加此箭头（https://cdn0.iconfinder.com/data/icons/slim-square-icons-basics/100/basics-08-128.png）以创建锚点。如何在我创建的幻灯片中添加内部和前部的箭头（我的意思是，使其可见）。这是幻灯片代码：

＆＃13;

＆＃13;

(function() {

  function Slideshow(element) {
    this.el = document.querySelector(element);
    this.init();
  }

  Slideshow.prototype = {
    init: function() {
      this.wrapper = this.el.querySelector(".slider-wrapper");
      this.slides = this.el.querySelectorAll(".slide");
      this.previous = this.el.querySelector(".slider-previous");
      this.next = this.el.querySelector(".slider-next");
      this.index = 0;
      this.total = this.slides.length;
      this.timer = null;
      this.nextButton = this.el.querySelector(".next");
      this.prevButton = this.el.querySelector(".prev");

      this.action();
      this.stopStart();
      this.nextSlide();
      this.prevSlide();
    },
    _slideTo: function(slide) {
      var currentSlide = this.slides[slide];
      currentSlide.style.opacity = 1;

      for (var i = 0; i < this.slides.length; i++) {
        var slide = this.slides[i];
        if (slide !== currentSlide) {
          slide.style.opacity = 0;
        }
      }
    },
    action: function() {
      var self = this;
      self.timer = setInterval(function() {
        self.index++;
        if (self.index == self.slides.length) {
          self.index = 0;
        }
        self._slideTo(self.index);

      }, 10000);
    },
    stopStart: function() {
      var self = this;
      self.el.addEventListener("mouseover", function() {
        clearInterval(self.timer);
        self.timer = null;

      }, false);
      self.el.addEventListener("mouseout", function() {
        self.action();

      }, false);
    },
    nextSlide: function() {
      var self = this;
      self.nextButton.addEventListener("click", function() {
        clearInterval(self.timer);
        self.timer = null;
        self.index++;
        if (self.index == self.slides.length) {
          self.index = 0;
        }
        self._slideTo(self.index);

      });
    },
    prevSlide: function() {
      var self = this;
      self.prevButton.addEventListener("click", function() {
        clearInterval(self.timer);
        self.timer = null;
        self.index--;
        if (self.index == -1) {
          self.index = self.slides.length - 1;
        }

        self._slideTo(self.index);

      });
    }


  };

  document.addEventListener("DOMContentLoaded", function() {

    var slider = new Slideshow("#main-slider");

  });


})();

＆＃13;

html,
body {
  margin: 0;
  padding: 0;
}

.slider {
  width: 100%;
}

.slider-wrapper {
  width: 100%;
  height: 600px;
  position: relative;
}

.slide {
  float: left;
  position: absolute;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 3s linear;
}

.slider-wrapper>.slide:first-child {
  opacity: 1;
}


/* Next & previous buttons */

.prev,
.next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  margin-top: -22px;
  padding: 16px;
  color: white;
  font-weight: bold;
  font-size: 18px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
}


/* Position the "next button" to the right */

.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}


/* On hover, add a black background color with a little bit see-through */

.prev:hover,
.next:hover {
  background-color: rgba(0, 0, 0, 0.8);
}

@media screen and (max-width: 480px) {
  img {
    max-height: 300px
  }
  .prev,
  .next {
    top=30%
  }
}

＆＃13;

<div class="slider" id="main-slider">
  <!-- outermost container element -->
  <div class="slider-wrapper">

    <!-- innermost wrapper element -->

    <img src="http://181ge72mb8rnbx7z1k119thi.wpengine.netdna-cdn.com/wp-content/uploads/2017/02/TargheeMusicFestival2014_4510-Cody-Downard-1280x600.jpg" alt="First" class="slide" style="width:100%" />
    <!-- slides -->
    <img src="http://daltonranch.com/wp-content/uploads/2014/06/golf-1280x600.jpg" alt="Second" class="slide" style="width:100%" />
    <img src="http://www.sageaxcess.com/wp-content/uploads/2014/09/Sage-Background-4-1280x600.jpg" alt="Third" class="slide" style="width:100%" />


    <a class="prev" onclick="plusSlides(-1)">&#10094;</a>
    <a class="next" onclick="plusSlides(1)">&#10095;</a>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

有人可以帮助我吗？

谢谢，

约翰