передать изображение следующего и предыдущего

Question

Я использую код ниже, который имеет два модальных «modalgallery» показывает увеличенное изображение в модале "modalgconfirmedelete", когда вы идете, чтобы удалить изображение. Я хотел, чтобы в «modalgallery» были включены кнопки «Следующая» и «Предыдущая», но я не смог этого сделать. спасибо за помощь

modalgallery.js

$(function() {
$('.pop').on('click', function() {
    $('.imagepreview').attr('src', $(this).attr('data-img-url'));
    $(this).next('.imagemodal').modal('show');   
});     
});

modalconfirmedelete.js

$(function() {
    $('.pop2').on('click', function() {
   $(this).closest(".imagemodal").next(".delete").modal('show');   
    });     
 });

perfil.html

  {% for photo in photos %}


  <a class="pop" href="#"  data-img-url="{{ photo.file.large.url}}"><img src="{{ photo.file.medium.url}}"class="img-thumbnail" width="200" height="200"> </a>

  <!-- Modal Gallery-->
  <div class="modal fade imagemodal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg">
              <div class="modal-content">              
              <div class="modal-body">
                    <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">X</span></button>
              <img src="" class="imagepreview" style="width: 100%;" >
              <a class="pop2" href="#" ><img src="{% static 'svg/delete.svg' %}" width="20" height="20" alt="">Deletar </a>

              </div>


              </div>
        </div>
        </div>

        <div class="modal fade delete" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg">
              <div class="modal-content">              
              <div class="modal-body">
                    <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">X</span></button>

                          <h2>Tem certeza que deseja deletar essa foto: </h2>
                          <a href="{% url 'delete' photo.id %}" type="button" class="btn bg-danger text-white js-upload-photos">
                                      <span class="glyphicon glyphicon-cloud-upload"></span> Deletar
                                </a>


              </div>
              </div>
        </div>
        </div>


{% endfor %}


</div>
</div>
</div>
{% endif %}
 {% endif %}