function for change the image using keyboard arrow key

user_16746223 0
Viewed 144

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 to change the image to the left and the right arrow 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.

This is what I have tried so far:

document.addEventListener('keydown', function(e) {
  switch (e.keyCode) {
    case 37:
      alert('left');
      break;
    case 39:
      alert('right');
      break;
  }
});
.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>

css html javascript
1 Answers

I see your code there is no problem with the javascript your key down function should look like this

<pre>document.addEventListener('keydown', function (e) {
    if(e.keyCode === 37){ plusSlides(-1); }    //for left arrow
    if(e.keyCode === 39){ plusSlides(1) }     //for right arrow
});
</pre>

The Full Code is here.

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <script src="https://code.jquery.com/jquery-3.3.1.js" type="text/javascript"></script>
    <style>
        body {
            font-family: Arial;
            margin: 0;
        }

        * {
            box-sizing: border-box;
        }

        img {
            vertical-align: middle;
        }

        /* Position the image container (needed to position the left and right arrows) */
        .container {
            position: relative;
        }

        /* Hide the images by default */
        .mySlides {
            display: none;
        }

        /* Add a pointer when hovering over the thumbnail images */
        .cursor {
            cursor: pointer;
        }

        /* Next & previous buttons */
        .prev,
        .next {
            cursor: pointer;
            position: absolute;
            top: 40%;
            width: auto;
            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;
        }

        /* Position the "next button" to the right */
        .next {
            right: 0;
            border-radius: 3px 0 0 3px;
        }

            /* On hover, add a black background color with a little bit see-through */
            .prev:hover,
            .next:hover {
                background-color: rgba(0, 0, 0, 0.8);
            }

        /* Number text (1/3 etc) */
        .numbertext {
            color: #f2f2f2;
            font-size: 12px;
            padding: 8px 12px;
            position: absolute;
            top: 0;
        }

        /* Container for image text */
        .caption-container {
            text-align: center;
            background-color: #222;
            padding: 2px 16px;
            color: white;
        }

        .row:after {
            content: "";
            display: table;
            clear: both;
        }

        /* Six columns side by side */
        .column {
            float: left;
            width: 16.66%;
        }

        /* Add a transparency effect for thumnbail images */
        .demo {
            opacity: 0.6;
        }

            .active,
            .demo:hover {
                opacity: 1;
            }
    </style>
</head>
<body>

    <h2 style="text-align:center">Slideshow Gallery</h2>

    <div class="container">
        <div class="mySlides">
            <div class="numbertext">1 / 2</div>
            <img src="https://source.unsplash.com/collection/190727/300x210" style="width:100%">
        </div>

        <div class="mySlides">
            <div class="numbertext">2 / 2</div>
            <img src="https://source.unsplash.com/collection/190727/300x200" style="width:100%">
        </div>

        

        <a class="prev" onclick="plusSlides(-1)">❮</a>
        <a class="next" onclick="plusSlides(1)">❯</a>

        <div class="caption-container">
            <p id="caption"></p>
        </div>

        <div class="row">
            <div class="column">
                <img class="demo cursor" src="https://source.unsplash.com/collection/190727/300x200" style="width:100%" onclick="currentSlide(1)" alt="The Woods">
            </div>
            <div class="column">
                <img class="demo cursor" src="https://source.unsplash.com/collection/190727/300x210" style="width:100%" onclick="currentSlide(2)" alt="Cinque Terre">
            </div>
           
        </div>
    </div>

<script type="text/javascript">
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;
}

 document.addEventListener('keydown', function (e) {
    if(e.keyCode === 37){ plusSlides(-1); }    //for left arrow
    if(e.keyCode === 39){ plusSlides(1) }     //for right arrow
});
    </script>

</body>
</html>
user_168034900
Related