title: Add next and previous buttons when the I open the modal
body: <p>I am a newbie and I wanted to ask if you can help me add next and previous buttons to my modal. The pictures are not in gallery form. Do I add div or just like this and add some javascript? Can you suggest some?</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var modal = document.getElementById('myModal');
  
  
  var img = $('.myImg');
  var modalImg = $("#img01");
  var captionText = document.getElementById("caption");
  $('.myImg').click(function(){
      modal.style.display = "block";
      var newSrc = this.src;
      modalImg.attr('src', newSrc);
      captionText.innerHTML = this.alt;
  });
   
  
  var span = document.getElementsByClassName("close")[0];
  span.onclick = function() {
    modal.style.display = "none";
  }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.myImg {
      border-radius: 5px;
      cursor: pointer;
      transition: 0.3s;
  }
  
  .myImg:hover {opacity: 0.7;}
  
  
  .modal {
      display: none;
      position: fixed;
      z-index: 1;
      padding-top: 100px;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      overflow: auto;
      background-color: rgb(0,0,0);
      background-color: rgba(0,0,0,0.9);
  }
  
  
  .modal-content {
      margin: auto;
      display: block;
      width: 80%;
      max-width: 700px;
  }
  
  #caption {
      margin: auto;
      display: block;
      width: 80%;
      max-width: 700px;
      text-align: center;
      color: #ccc;
      padding: 10px 0;
      height: 150px;
  }
  
  
  
  .modal-content, #caption {
      -webkit-animation-name: zoom;
      -webkit-animation-duration: 0.6s;
      animation-name: zoom;
      animation-duration: 0.6s;
  }
  
  @-webkit-keyframes zoom {
      from {-webkit-transform:scale(0)}
      to {-webkit-transform:scale(1)}
  }
  
  @keyframes zoom {
      from {transform:scale(0)}
      to {transform:scale(1)}
  }
  
  
  .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;
  }
  
  
  @media only screen and (max-width: 700px){
      .modal-content {
          width: 100%;
      }
  }
  .nvgt{
      position:absolute;
      top: 120px;
      height: 50px;
      width: 30px;
      opacity: 0.6;
  }
  .nvgt:hover{
      opacity: 0.9;
  }
  #prev{
      background: #000 url('./image/prev.png') no-repeat center;
      left: 0px;
  }
  ul {
    list-style-type: none;
  
    }
   ul li {
   display: inline-block;
   background:white;
    margin-bottom:10px;
  }  </code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div&gt;
  &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;ul&gt;
  &lt;li&gt;&lt;/li&gt;&lt;img class="myImg" src="https://media.giphy.com/media/28XGOLkn9HIXK/giphy.gif" alt="Grumpy Cat Paintball" width="300" height="200"&gt;
  &lt;li&gt;&lt;img class="myImg" src="https://g.twimg.com/blog/blog/image/Cat-party.gif" alt="DJ Cat" width="300" height="200"&gt;&lt;/li&gt;
  &lt;li&gt;&lt;img class="myImg" src="https://media.giphy.com/media/26FPCXdkvDbKBbgOI/giphy.gif" alt="Sorcerer Supreme" width="300" height="200"&gt;&lt;/li&gt;
  &lt;li&gt;&lt;img class="myImg" src="https://media.giphy.com/media/f2fVSJWddYb6g/giphy.gif" alt="Rambo" width="300" height="200"&gt;&lt;/li&gt;
  &lt;li&gt;&lt;img class="myImg" src="http://24.media.tumblr.com/tumblr_lg3i47epIK1qght7mo1_500.gif" alt="Laser Vision" width="300" height="200"&gt;&lt;/li&gt;
  &lt;/ul&gt;
  &lt;div id="myModal" class="modal"&gt;
    &lt;span class="close" onclick="document.getElementById('myModal').style.display='none'"&gt;&amp;times;&lt;/span&gt;
    &lt;img class="modal-content" id="img01"&gt;
    &lt;div id="caption"&gt;&lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Should look like this:</p>
  
  <p><a href="https://i.stack.imgur.com/cJkLF.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/cJkLF.png" alt="enter image description here"></a></p>