title: Make Img Slideshow with prev and next button
body: <p>How Do I make it so that when I click Next It will go to the next array image and when I click Previous it will go to the previous array image. I am trying to make a image slide show that has two buttons. one to go to the next picture and one to go to the previous picture</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;meta charset="utf-8"&gt;
  
  
  
  &lt;script&gt;
      var images = new Array(7);  
      images[0] = "Images/lab1.jpeg";
      images[1] = "Images/lab2.jpeg";
      images[2] = "Images/lab3.jpeg";
      images[3] = "Images/lab4.jpeg";
      images[4] = "Images/lab5.jpeg";
      images[5] = "Images/lab6.jpeg";
      images[6] = "Images/lab7.jpeg";
      images[7] = "Images/lab8.jpeg";
      var num_img = 7;
      var cur_img = 1;
  
    function  goback() {
  
      if(cur_img&gt;0)
     {
  
      cur_img = cur_img - 1;
     }else{
      alert("This is the first image");
     }
  
  
  }
  
  function gofwd(){
  
      if(cur_img &lt; num_img){
  
      cur_img = cur_img + 1;
     }else{
        alert("This is the last image");
        }
  
  
  }
  
  
  &lt;/script&gt;
  
  
  &lt;/script&gt;
  
  
  
  
  &lt;/head&gt;
  &lt;body&gt;
  
  &lt;div style="border: solid 12px blue; width: 500px; height: 500px;"&gt;
  &lt;img src="Images/lab1.jpeg" alt="lab1" height="500" width="500"&gt;
  &lt;/div&gt;&lt;br&gt;
  &lt;input type="button" value="PREVIOUS" id="prev" name="prev" style="color:blue" onclick="goback();" &gt;
  
  &lt;input type="button" value="NEXT" id="next" name="next" style="color:blue" onclick="gofwd();" &gt;
  
  
  
  
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>