What function should I use to change image using left and right arrow keys

I have a gallery. of images, I need to change the image when the user will press the arrow keys after the modal popup. left arrow key to change the image to the left and the right arrow key for right. I'm pretty new to JavaScript so I couldn't understand what function should I use to change the images to left and right.

I tried

.modal {
  width: 58%;
  height: 100%;
  top: 0;
  position: fixed;
  display: none;
  background-color: rgba(22, 22, 22, 0.5);
  margin-left: 300px;
  max-width: 779px;
  min-width: 779px;
}

.modal-content {
  margin: auto;
  display: block;
  width: 80%;
  max-width: 700px;
}

.mySlides {
  display: none;
}

.mySlides {
  display: none;
}

.cursor {
  cursor: pointer;
}

.cursor {
  cursor: pointer;
}

.prev {
  cursor: pointer;
  position: relative;
  top: -149px;
  padding: 16px;
  margin-top: -50px;
  color: white;
  font-weight: bold;
  font-size: 20px;
  border-radius: 0 3px 3px 0;
  user-select: none;
  -webkit-user-select: none;
  left: -10%;
}

.next {
  cursor: pointer;
  position: relative;
  top: -149px;
  padding: 16px;
  margin-top: -50px;
  color: white;
  font-weight: bold;
  font-size: 20px;
  border-radius: 0 3px 3px 0;
  user-select: none;
  -webkit-user-select: none;
  left: 600px;
}

<div class="main-container">
  <div class="row">
    <div class="column">
      <p align="center"><img src="https://source.unsplash.com/collection/190727/300x200" width="250" height="164" onclick="openModal();currentSlide(1)" class="hover-shadow cursor"></p>
    </div>
    <div class="column">
      <p align="center"><img src="https://source.unsplash.com/collection/190727/300x210" width="250" height="164" onclick="openModal();currentSlide(2)" class="hover-shadow cursor"></p>
    </div>
    <div id="myModal" class="modal">
      <div class="modal-content">
        <span class="close cursor" onclick="closeModal()">&times;</span>
        <div class="mySlides">
          <img src="https://source.unsplash.com/collection/190727/300x200" style="width: 98%;
position: relative;
left: 10px;
top: 109px;">
        </div>
        <div class="mySlides">
          <img src="https://source.unsplash.com/collection/190727/300x210" style="width: 98%;
position: relative;
left: 10px;
top: 109px;">
        </div>
        <a class="prev" id="prev1" onclick="plusSlides(-1)">&#10094;</a>
        <a class="next" onclick="plusSlides(1)">&#10095;</a>
      </div>

document.addEventListener('keydown', function(e) {
  if (e.keyCode === 37) {} else if (e.keyCode === 39) {}
});

from Recent Questions - Stack Overflow https://ift.tt/3kyFSEn
https://ift.tt/eA8V8J