Добавление навигации по клавиатуре в слайд-шоу

Question

У меня есть модальное слайд-шоу на моей странице, и я хотел бы, чтобы оно закрывалось при нажатии клавиши "esc", а также переходило к следующему изображению при использовании правой и левой клавиш. Было бы также полезно, если бы модальное окно закрывалось, когда пользователь щелкал на любой части модального окна, кроме изображения.

Может кто-то помочь мне, пожалуйста!!

Джава:

<script type="text/javascript">



function openModal() {

  document.getElementById('myModal').style.display = "block";

}


function closeModal() {

  document.getElementById('myModal').style.display = "none";

}




var slideIndex = 1;

showSlides(slideIndex);



function plusSlides(n) {

  showSlides(slideIndex += n);

}



function currentSlide(n) {

  showSlides(slideIndex = n);

}



function showSlides(n) {

  var i;

  var slides = document.getElementsByClassName("mySlides");

  var dots = document.getElementsByClassName("demo");

  var captionText = document.getElementById("caption");

  if (n > slides.length) {slideIndex = 1}

  if (n < 1) {slideIndex = slides.length}

  for (i = 0; i < slides.length; i++) {

      slides[i].style.display = "none";

  }

  for (i = 0; i < dots.length; i++) {

      dots[i].className = dots[i].className.replace(" active", "");

  }

  slides[slideIndex-1].style.display = "block";

  dots[slideIndex-1].className += " active";

  captionText.innerHTML = dots[slideIndex-1].alt;

}


</script>

.img{

    width: 85%;

 margin-top: 2%;
  }
  
  .img:hover{

cursor: pointer;

opacity: 0.9;

}

.img1{

    height: 100%;

 display: block;

 margin-left: auto;

 margin-right: auto;
  
  }
  
  .mySlides {

  display: none;

  height: 70%;

}
.prev, .next {

  cursor: pointer;

  position: relative;

  width: auto;

  padding: 0.7%;

  z-index: 2;

  color: white;

  font-weight: 200;

  font-size: 125%;

  transition: 0.6s ease;

  border-radius: 30% 0 0 30%;

  -webkit-user-select: none;

}
.demo{

 

  -ms-transform: scale(1.8, 1.8); /* IE 9 */

    -webkit-transform: scale(1.8, 1.8);

 height: 100%;

}

.demo:hover{

cursor: pointer;

opacity: 0.6;

}

.column{

 display: inline-block;

 overflow: hidden;

 margin-right: auto;

 margin-left: auto;

 width: 10.50%;

 height: 60%;

 

}

#slideshow{

 margin-right: auto;

 margin-left: auto;

 margin-top: 1%;

 width: 70%;

 height: 15%;

 text-align: center;

 display: block;

 margin-bottom: 5%;


}

<div id="content">

       
       <img class="img" src="london1.jpg" alt="London" onclick="openModal();currentSlide(1)"/>

      <p>Paradisum, 2016.</p>

      <img class="img" src="london2.jpg" alt="London" onclick="openModal();currentSlide(2)"/>

      <p>Ecclesia, 2016.</p>

      <img class="img" src="london3.jpg" alt="London" onclick="openModal();currentSlide(3)"/>



      <img class="img" src="london4.jpg" alt="London" onclick="openModal();currentSlide(4)"/>

    

      <img class="img" src="london5.jpg" alt="London" onclick="openModal();currentSlide(5)"/>

      <p>55 Broadway, 2016.</p>

      <img class="img" src="london6.jpg" alt="London" onclick="openModal();currentSlide(6)"/>

      <p>Kiosk, 2016.</p>


    

      

   <div id="myModal" class="modal">

  <span class="close cursor" onclick="closeModal()">&times;</span>

  <div class="modal-content">



       <div class="mySlides">

      <img class="img1" alt="London" src="london1.jpg"/>

    </div>

    <div class="mySlides">

      <img class="img1" alt="London"  src="london2.jpg"/>

    </div>

    <div class="mySlides">

      <img class="img1" alt="London" src="london3.jpg"/>

    </div>

    <div class="mySlides">

      <img class="img1" alt="London" src="london4.jpg"/>

    </div>

    <div class="mySlides">

      <img class="img1" alt="London" src="london5.jpg"/>

    </div>

    <div class="mySlides">

      <img class="img1" alt="London" src="london6.jpg"/>

    </div>



    <a class="prev" onclick="plusSlides(-1)">&#10094;</a>

    <a class="next" onclick="plusSlides(1)">&#10095;</a>



    <div class="caption-container">

      <p id="caption"> CAPTION</p>

    </div>



<div id="slideshow">


    <div class="column">

      <img class="demo" src="london1.jpg" onclick="currentSlide(1)" alt="Paradisum, 2016"/>

    </div>

    <div class="column">

      <img class="demo" src="london2.jpg" onclick="currentSlide(2)" alt="Ecclesia, 2016"/>

    </div>

    <div class="column">

      <img class="demo" src="london3.jpg" onclick="currentSlide(3)"/>

    </div>

    <div class="column">

      <img class="demo" src="london4.jpg" onclick="currentSlide(4)"/>

    </div>

    <div class="column">

      <img class="demo" src="london5.jpg" onclick="currentSlide(5)" alt="55 Broadway, 2016"/>

    </div>

    <div class="column">

      <img class="demo" src="london6.jpg" onclick="currentSlide(6)" alt="Kiosk, 2016"/>

    </div>
</div>
</div>
</div>
</div>

Answer 1

Вы можете использовать eventListener на kayboard и получить код ключа для установки действий, например:

document.addEventListener('keydown', function(e) {
    if(e.keyCode == 37) {
        //your code
    }
    //your code
});

Вы можете увидеть все коды клавиш здесь