title: How can i make my javascript slider work?
body: <p>i started object oriented programming today. Im trying to remake something i made in spaghetti code but  i cant make it work. </p>
  
  <pre><code>class slider{
      constructor(){
          this.slide = ["images/slide1.jpg", "images/slide2.jpg", "images/slide3.jpg", ];
          this.next = document.getElementById('next');
          this.previous = document.getElementById('previous');
          this.bouttonSlider = this.next.onclick = function (){
              this.i = 0;
              document.getElementById("slide").src = this.slide[++this.i];
              if (i &gt;= 2){
                  i=0;
              }
          }
      }
  };
  
  
  </code></pre>
  
  <p>Here is my html</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
      &lt;meta charset="UTF-8"&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
      &lt;meta http-equiv="X-UA-Compatible" content="ie=edge"&gt;
      &lt;title&gt;Document&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;div id="slider" style="width: 75%; margin-left: auto; margin-right: auto;"&gt;
      &lt;img src="images/slide1.jpg" style="width: 100%;" id="greee"&gt;
  &lt;/div&gt;
  &lt;button id="previous"&gt;previous&lt;/button&gt;
  &lt;button id="next"&gt;next&lt;/button&gt;
  &lt;script src="script.js"&gt;&lt;/script&gt;    
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>