模态中的图像滑块

Question

Iam建立了我的相册页面，并且Iam停留在模态内的滑块上。我有一个上一个和下一个按钮，但是Iam停留在如何为此编写函数的基本想法是我拥有一个不同类别的图像画廊。如果我单击自然，它将显示该类别的图像，但是我想添加滑块按钮，以便它将显示该类别的所有图像，而不是关闭模式并返回到我的画廊页面。到目前为止，这是我的代码。

.image-grid{
  width: 100%;
  margin: auto;
  display: grid;
  grid-template-columns: auto auto auto auto auto;
  padding:5px;
  cursor: pointer;


}




modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index:1;/* Sit on top */
    padding-top: 50px; /* Location of the box */
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: hidden; /* Enable scroll if needed */
    background-color: black; /* Fallback color */
    text-align: center;
}



/* Modal Content (Image) */
.modal-content {
    margin: auto;
    display: block;
    width: 80%;
    max-width: 700px;
    height: 500px;
    background: black;
    cursor:pointer;


}


/* Caption of Modal Image (Image Text) - Same Width as the Image */
#caption {
    margin: auto;
    display: block;
    width: 80%;
    max-width: 700px;
    text-align: center;
    color: #ccc;
    padding: 10px 0;
    height: 50px;
    border-radius: 5px;
    background-color:blue;
    overflow:hidden;

}



/* Add Animation - Zoom in the Modal */
.modal-content, #caption {
    -webkit-animation-name: zoom;
    -webkit-animation-duration: 0.6s;
    animation-name: zoom;
    animation-duration: 0.6s;
    overflow-x: hidden;
}

@-webkit-keyframes zoom {
    from {-webkit-transform:scale(0)}
    to {-webkit-transform:scale(1)}
}

@keyframes zoom {
    from {transform:scale(0)}
    to {transform:scale(1)}
}

/* The Close Button */
.close {
    position: absolute;
    top: 15px;
    right: 35px;
    color: #f1f1f1;
    font-size: 40px;
    font-weight: bold;
    transition: 0.3s;
}

.close:hover,
.close:focus {
    color: #bbb;
    text-decoration: none;
    cursor: pointer;
}

.people img{
  height:200px;
  width: 220px;
  border-radius: 10px;
}

.nature img{
  height:200px;
  width: 220px;
  border-radius: 10px;
}

.people{
  display: inline;
  float: left;
  padding: 2px;
  margin: auto;

  /*border-style: inset;*/

}
.nature{
  display: inline;
  float: left;
  padding: 2px;
  margin: auto;
  /*border-style: outset;*/

}

<script>
 // Get the modal
 var modal = document.getElementById('myModal');

 // Get the image and insert it inside the modal - use its "alt" text as a caption
 var img = $('.gallery_image');
 var modalImg = $("#img01");
 var captionText = document.getElementById("caption");
 $('.gallery_image').click(function(){
     modal.style.display = "block";
     var newSrc = this.src;
     modalImg.attr('src', newSrc);
     captionText.innerHTML = this.alt;
 });

 // Get the <span> element that closes the modal
 var span = document.getElementsByClassName("close")[0];

 // When the user clicks on <span> (x), close the modal
 span.onclick = function() {
   modal.style.display = "none";
 }

 //when the user clicks outisde the image
 window.onclick = function(event) {
    if (event.target == myModal) {
        modal.style.display = "none";
    }
  }
</script>

<div class="elements">

   <ul class="image-grid">


     <li class="people"><img src="./images/anil.jpg" alt="Anil at Levi, Finland" class="gallery_image"></li>
     <li class="people"><img src="./images/deepak.jpg" alt="Conceptual photography" class="gallery_image"></li>
     <li class="people"><img src="./images/sunny.jpg" alt="At Krakow, Poland" class="gallery_image"></li>
     <li class="people"><img src="./images/pandey.JPG" alt="Prabin Pandey.pp" class="gallery_image"></li>

     <li class="nature"><img src="./images/rain.jpg" alt="Rainy day at Otavanaukio,Turku" class="gallery_image"></li>
     <li class="nature"><img src="./images/light.jpg" alt="Light combo of Summer" class="gallery_image"></li>
     <li class="nature"><img src="./images/talo.jpg" alt="Student Village,Turku" class="gallery_image"></li>
     <li class="nature"><img src="./images/snow.jpg" alt="Winter@ student village" class="gallery_image"></li>
     <li class="nature"><img src="./images/wbird.jpg" alt="summer-bird" class="gallery_image"></li>

     </ul>
     </div>

     <div id="myModal" class="modal">
   <span class="close">&times;</span>
   <img class="modal-content" id="img01">
   <a href="#" class="previous round">&#8249;</a>
   <a href="#" class="next round">&#8250;</a>
   <div id="caption"></div>

 </div>