title: next previous anchor for each photos in a html page
body: <p>I am trying to create a photo gallery page that will be listing photos one by one. But i would like to have an anchor for each photos that when user clicks on next previous buttons it should slide to the next/previous photos accordingly by using the ID's values.</p>
  
  <p>How to achieve this function in jquery?</p>
  
  <p><a href="https://jsfiddle.net/2oqg9rpL/1/" rel="nofollow noreferrer">https://jsfiddle.net/2oqg9rpL/1/</a></p>
  
  <pre><code>&lt;div class="photogallery_wrapper_nf"&gt;
  
          &lt;div class="next"&gt;&lt;img src="http://ktdev.khaleejtimes.ae/up-chevron.png" /&gt;&lt;/div&gt;
          &lt;div class="previous"&gt;&lt;img src="http://ktdev.khaleejtimes.ae/down-chevron.png" /&gt;&lt;/div&gt;
  
          &lt;div class="photogallery_item_nf_heading"&gt;
  
              &lt;h1&gt;Heading # 1 &lt;/h1&gt;
              &lt;p&gt;Published on November 17, 2019 at 07.50 am&lt;/p&gt;
          &lt;/div&gt;
  
          &lt;div class="photogallery_item_nf" id="slide1"&gt;
              &lt;div class="photogallery_item_nf_img"&gt;
                  &lt;img src="https://picsum.photos/1200/800/?random" /&gt;
  
              &lt;/div&gt;
  
              &lt;div class="photogallery_item_nf_caption"&gt;
  
                  &lt;h3&gt;Caption goes here Caption goes hereCaption goes here&lt;/h3&gt;
                  &lt;h6&gt;Photo by ddvdvd &lt;/h6&gt;
  
              &lt;/div&gt;
  
          &lt;/div&gt;
  
  
          &lt;div class="photogallery_item_nf" id="slide2"&gt;
              &lt;div class="photogallery_item_nf_img"&gt;
                  &lt;img src="https://picsum.photos/1200/800/?random" /&gt;
  
              &lt;/div&gt;
  
              &lt;div class="photogallery_item_nf_caption"&gt;
  
          &lt;h3&gt;Caption goes here Caption goes hereCaption goes here&lt;/h3&gt;
                  &lt;h6&gt;Photo by ddvdvd &lt;/h6&gt;
  
              &lt;/div&gt;
  
          &lt;/div&gt;
  
  
  
          &lt;div class="photogallery_item_nf" id="slide3"&gt;
              &lt;div class="photogallery_item_nf_img"&gt;
                  &lt;img src="https://picsum.photos/1200/800/?random" /&gt;
  
              &lt;/div&gt;
  
              &lt;div class="photogallery_item_nf_caption"&gt;
  
          &lt;h3&gt;Caption goes here Caption goes hereCaption goes here&lt;/h3&gt;
                  &lt;h6&gt;Photo by ddvdvd &lt;/h6&gt;
  
              &lt;/div&gt;
  
          &lt;/div&gt;
  
                  &lt;div class="photogallery_item_nf" id="slide4"&gt;
              &lt;div class="photogallery_item_nf_img"&gt;
                  &lt;img src="https://picsum.photos/1200/800/?random" /&gt;
  
              &lt;/div&gt;
  
              &lt;div class="photogallery_item_nf_caption"&gt;
          &lt;h3&gt;Caption goes here Caption goes hereCaption goes here&lt;/h3&gt;
                  &lt;h6&gt;Photo by ddvdvd &lt;/h6&gt;
  
              &lt;/div&gt;
  
          &lt;/div&gt;
  
      &lt;/div&gt;
  
  
  
  
  
  
  
  
  .photogallery_wrapper_nf {
          width: 100%;
          float: left;
          position: relative;
          clear: both;
      }
  
      .next {
          position: fixed;
          width: 40px;
          height: 40px;
          bottom: 15px;
          right: 15px;
          z-index: 999 !important;
      }
      .previous {
          position: fixed;
          width: 40px;
          height: 40px;
          bottom: 15px;
          right: 75px;
          z-index: 999 !important;
      }
  
      .next img {
          width: 40px !important;
          height: 40px  !important;
      }
      .previous img {
          width: 40px !important;
          height: 40px  !important;
      }
  
      .photogallery_item_nf {
          width: 100%;
          float: left;
          position: relative;
          margin-bottom: 20px;
      }
      .photogallery_item_nf_heading {
          width: 100%;
          clear: both;
          margin: 15px 0px;
      }
      .photogallery_item_nf_heading h1 {
          color: #000 !important;
          font-family: 'Roboto Condensed', sans-serif;
          font-weight: bold;
          font-size: 35px;
          line-height: 40px;
          font-weight: bold;
          padding-left: 10px;
      }
      .photogallery_item_nf_heading p {
          margin-top: 8px;
          color: #767676 !important;
          font-family: 'Roboto Condensed', sans-serif;
          font-size: 15px;
          font-weight: normal;
          padding-left: 10px;
      }
  
      .photogallery_item_nf_img {
          width: 100%;
          float: left;
          position: relative;
      }
      .photogallery_item_nf_img img {
          width: 100%;
      }
      .photogallery_item_nf_caption {
          width: 100%;
          float: left;
          position: relative;
          padding: 12px 0;  
      }
  
  
      .photogallery_item_nf_caption h3 {
          color: #000 !important;
          font-family: 'Roboto Condensed', sans-serif;
          font-size: 18px;
          line-height: 26px;
          font-weight: bold;
          padding-left: 10px;
          margin-bottom: 10px;
      }
      .photogallery_item_nf_caption h6 {
          color: #767676 !important;
          font-family: 'Roboto Condensed', sans-serif;
          font-size: 15px;
          font-weight: normal;
          padding-left: 10px;
      }
  
  &lt;/style&gt;
  </code></pre>