How to add navigation buttons(previous and next) to a modal
<p>I have created image thumbnail and linked that thumbnail using the following code.</p>

<p><div class="snippet" data-lang="js" data-hide="false">
<div class="snippet-code">
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
  &lt;script src="https://code.jquery.com/jquery-2.2.3.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"&gt;&lt;/script&gt;
  &lt;link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel='stylesheet' type='text/css' /&gt;
  
&lt;/head&gt;
&lt;body&gt;

  &lt;!--thumbnail section--&gt;
  &lt;section class="container"&gt;
   &lt;div class="row add-bottom text-center"&gt;
    &lt;a href="#migrant" class="thumbnail" data-toggle="modal"&gt;
     &lt;img src=".." alt="Project Image" class="img-responsive center-block"&gt;
    &lt;/a&gt;
    &lt;br /&gt;
    &lt;br /&gt;
    &lt;a href="#water" class="thumbnail" data-toggle="modal"&gt;
     &lt;img src=".." alt="Project Image1" class="img-responsive center-block"&gt;
    &lt;/a&gt;
   &lt;/div&gt;
  &lt;/section&gt;
  
  &lt;!--Modal Content--&gt;
  &lt;div class="modal fade" id="migrant" role="dialog"&gt;
   &lt;div class="modal-dialog"&gt;
    
    &lt;div class="modal-content"&gt;
     &lt;div class="modal-header"&gt;
      
      &lt;h3&gt;Migrants&lt;/h3&gt;
      &lt;button type="button" class="close" data-dismiss="modal"&gt;x&lt;/button&gt;
     &lt;/div&gt;
     &lt;div class="modal-body"&gt;
      &lt;div class="modal-footer txt_center"&gt;
       &lt;p&gt;
        &lt;img src=".." alt="migrant01" class="pull-right"&gt;The Grapes of Wrath is an Amer list novel written by John Steinbeck and published in 1939. The book won the National Book Award and Pulitzer Prize for fiction, and it was cited prominently when Steinbeck was awarded the Nobel Prize in 1962
       &lt;/p&gt;
      &lt;/div&gt;
     &lt;/div&gt;
     &lt;div class="modal-footer"&gt;
      &lt;button class="btn" data-dismiss="modal"&gt;Close&lt;/button&gt;
     &lt;/div&gt;
    &lt;/div&gt;
   &lt;/div&gt;
  &lt;/div&gt;

  &lt;div class="modal fade" id="water" role="dialog"&gt;
   &lt;div class="modal-dialog"&gt;
    
    &lt;div class="modal-content"&gt;
     &lt;div class="modal-header"&gt;
      &lt;h3&gt;Water&lt;/h3&gt;
      &lt;button type="button" class="close" data-dismiss="modal"&gt;x&lt;/button&gt;
     &lt;/div&gt;
     &lt;div class="modal-body"&gt;
      &lt;div class="modal-footer txt_center"&gt;
       &lt;p&gt;
        &lt;img src=".." alt="water01" class="pull-right"&gt;The Orchidaceae are a diverse and widespread family of flowering plants, with blooms that are often colourful and often fragrant, commonly known as the orchid family. Along with the Asteraceae, they are one of the two largest families of flowering
         plants. The Orchidaceae have about 27,800 currently accepted species, distributed in about 880 genera
       &lt;/p&gt;
      &lt;/div&gt;
     &lt;/div&gt;
     &lt;div class="modal-footer"&gt;
      &lt;button class="btn" data-dismiss="modal"&gt;Close&lt;/button&gt;
     &lt;/div&gt;
    &lt;/div&gt;
   &lt;/div&gt;
  &lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;</code></pre>
</div>
</div>
</p>

<p>Now I want to add navigation buttons(previous and next) to the modal window which will display the image along with a paragraph which describes the image.
So that once the modal window is displayed I don't have to close the window and go back to thumbnail image over and over again. Once, the modal window is displayed by adding the navigation button I want to go for the desired image with its description.
How possibly could I go for this?</p>