image slider with javascript with next previous button

The general appearance of the program is as follows:
enter image description here

the details
In this exercise, we complete a simple slider. You must add the previous and next button in this event. The next or previous image should be displayed when the next or previous button is clicked. You can use the functions defined in the initial project.

When the slider is on the last image and the next button is clicked, the first image should be displayed and also when the first image of the previous button is clicked, the last image should be displayed.

Note: When an image is displayed, its opacity must be 1 and the rest of the images must be 0.

Notes
You are only allowed to make changes to the main.js file.
html code :

const sliderImages = [
    "./images/image1.jpg",
    "./images/image2.jpg",
    "./images/image3.jpg",
    "./images/image4.jpg",
];
const sliderDom = document.getElementById("slider");

let currentImage = 0;

function renderImages() {
    sliderImages.forEach((image) => {
        sliderDom.innerHTML += "<img src='" + image + "' />";
    });
}

function clearImages() {
    const images = document.getElementsByTagName("img");
    for (let i = 0; i < images.length; i++) {
        images[i].style.opacity = 0;
    }
}

function showImage(image) {
    clearImages();
    document.getElementsByTagName("img")[image].style.opacity = 1;
}

function init() {
    renderImages();
    showImage(currentImage);
}

init();

let myBtn = document.querySelector("#prevButton");

myBtn.onclick = function() {
    const newImage = (currentImage + 1) % sliderImages.length;

    showImage(newImage);
}
let myBtn2 = document.querySelector("#nextButton");

myBtn2.onclick = function() {
    const newImage = (currentImage + 1) % sliderImages.length;
    showImage(newImage);


}
* {
  margin: 0;
  padding: 0;
}

button {
  padding: 8px;
}

.container {
  width: 500px;
  margin: 20px auto;
}

#slider {
  position: relative;
  height: 400px;
  margin-bottom: 20px;
}

#slider img {
  width: 500px;
  height: 400px;
  position: absolute;
  transition: all .5s;
}

.buttons {
  display: flex;
  justify-content: space-between;
}
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="style.css">
  <title>Slider</title>
</head>
<body>
  <div class="container">
    <div id="slider"></div>

    <div class="buttons">
      <button id="prevButton"><</button>
      <button id="nextButton">></button>
    </div>
  </div>
  
  <script src="main.js"></script>
</body>
</html>