title: Javascript Image Slider - Need to add buttons
body: <p>Please see my code below. This code works fine but i want to add pause/resume,forward,backward buttons. So if someone click on pause, it will stop auto rotation. I can't use Jquery. I worked on this code but i am not able to add buttons to this code. </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>(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.action();
              this.stopStart();   
          },
          _slideTo: function( slide ) {
              var currentSlide = this.slides[slide];
              currentSlide.style.opacity = 1;
  
              for( var i = 0; i &lt; 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 );
  
              }, 3000);
          },
          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);
          }
  
  
      };
  
      document.addEventListener( "DOMContentLoaded", function() {
  
          var slider = new Slideshow( "#main-slider" );
  
      });
  
  
  })();</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>html,body {
      margin: 0;
      padding: 0;
  }
  .slider {
      width: 1024px;
      margin: 2em auto;
  
  }
  
  .slider-wrapper {
      width: 100%;
      height: 400px;
      position: relative;
  }
  
  .slide {
      float: left;
      position: absolute;
      width: 100%;
      height: 100%;
      opacity: 0;
      transition: opacity 3s linear;
  }
  
  .slider-wrapper &gt; .slide:first-child {
      opacity: 1;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="slider" id="main-slider"&gt;&lt;!-- outermost container element --&gt;
      &lt;div class="slider-wrapper"&gt;&lt;!-- innermost wrapper element --&gt;
          &lt;img id="image1" src="SupplyImages/WF00/1489007864182_35556.jpg" alt="First" class="slide" /&gt;&lt;!-- slides --&gt;
          &lt;img id="image2" src="SupplyImages/WF00/1489008043581_741956.jpg" alt="Second" class="slide" /&gt;
          &lt;img id="image3" src="SupplyImages/WF00/1489008288715_503637.png" alt="Third" class="slide" /&gt;
      &lt;/div&gt;
  &lt;/div&gt;  </code></pre>
  </div>
  </div>
  </p>