Q:

How do i add next/previous buttons to my JavaScript (PHP/MySQL) image slider?

I have the following code that gets the images from MySQL database and displays them in a slider. Can anyone please tell me how do add the next/previous buttons to it. Any help would be appreciated, thanks !
<img id="slide" src="./pics/image1.jpg" alt="slideshow" width="300" height="300">

<script>
var time = 5000,    // time between images
i = 0,              // index for changing images
images = [],    // array of img src from PHP
preloads = [],      // array of preloaded images
slide = document.getElementById("slide");

images = <?php echo json_encode($paths); ?>; // from PHP to Js array
var len = images.length;

function changeImg(){
    slide.src = preloads[i].src;
    if (++i > len-1){
        i = 0;
    }
    setTimeout(changeImg, time);
}

function preload(){
    for (var c=0; c<len; c++){
        preloads[c] = new Image;
        preloads[c].src = images[c];
    }
}
window.addEventListener("load", function(){
    preload();
    setTimeout(changeImg, time);
});

A:

Following on from the previous thread How do i display images from MySQL database in a JavaScript image slider?, something like the following works. The first image is hard-coded into place, so that users with javascript turned off will still see the first image. Plus, that first image is visible while the page loads.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Slideshow from PHP - Button Controlled</title>
<style>
p {
  width: 300px; 
  display: flex; justify-content: space-between;
}
#prev, #next {
  background: #aaa; padding: 5px; width: 6em;
  text-align: center; cursor: pointer;
}
</style>
</head>
<body>
<div>
  <img id="slide" src="./pics/image1.jpg" alt="slideshow" width="300" height="300">
  <p>
    <span id="prev">Previous</span>
    <span id="next">Next</span>
  </p>
</div>
<script>
var time = 5000,    // time between images
    i = 0,          // index for changing images
    images = [],    // array of img src from PHP
    preloads = [],  // array of preloaded images
    slide = document.getElementById("slide");

images = <?php echo json_encode($paths); ?>; // from PHP to Js array
var len = images.length;

function changeImg(dirn){
  i += dirn;
  if (i > len-1){
    i = 0;
  }
  if (i < 0) {
    i = len-1;
  }
  slide.src = preloads[i].src;
}
function preload(){
  for (var c=0; c<len; c++){
    preloads[c] = new Image;
    preloads[c].src = images[c];
  }
}
window.addEventListener("load", preload);
document.getElementById("prev").addEventListener("click", function(){
  changeImg(-1);
});
document.getElementById("next").addEventListener("click", function(){
  changeImg(1);
});
</script>
</body>
</html>

