Добавление следующего / предыдущего параметра в слайд с использованием Jquery

Question

Я пытаюсь создать галерею, используя jQuery, все работает, но я не могу добавить параметр следующей / предыдущей стрелки, чтобы скользить изображения, когда они открываются в модальном режиме. Ниже приведен код, который я использую

<img class="myImg" src="images/test1" alt="test1" >
 <img class="myImg" src="images/test2" alt="test2">
 <img class="myImg" src="images/test3" alt="test3">
<img class="myImg" src="images/test4" alt="test4">

Ниже приведен код jQuery, который я использую

<script>
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];


</script>

Есть ли способ добавить следующие / предыдущие стрелки, чтобы скользить изображения, как только они открыты в модальных?

Answer 1

Как насчет использования плагина для облегчения вашей жизни?

Вот плагин под названием Slide , например, конечно, есть много других опций, таких как Amazing Slider .

Если вы действительно хотите создать его самостоятельно, вы можете перейти по этой ссылке из W3Schools

Для слайдеров внутри модального режима вы можете использовать Лайтбокс

Вот фрагмент кода

.modal.and.carousel {
  position: fixed;
}

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" />

<div class="container">
  <ul class="nav nav-pills nav-stacked">
    <li><a href="#lightbox" data-toggle="modal">Open Lightbox</a></li>
    <li><a href="#lightbox" data-toggle="modal" data-slide-to="1">2nd Image</a></li>
    <li><a href="#lightbox" data-toggle="modal" data-slide-to="2">3rd Image</a></li>
    <li><a href="#lightbox" data-toggle="modal" data-slide-to="15">Open non existing Image</a></li>
  </ul>

  <div class="modal fade and carousel slide" id="lightbox">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-body">
          <ol class="carousel-indicators">
            <li data-target="#lightbox" data-slide-to="0" class="active"></li>
            <li data-target="#lightbox" data-slide-to="1"></li>
            <li data-target="#lightbox" data-slide-to="2"></li>
          </ol>
          <div class="carousel-inner">
            <div class="item active">
              <img src="http://placehold.it/900x500/777/" alt="First slide">
            </div>
            <div class="item">
              <img src="http://placehold.it/900x500/666/" alt="Second slide">
            </div>
            <div class="item">
              <img src="http://placehold.it/900x500/555/" alt="Third slide">
              <div class="carousel-caption">
                <p>even with captions...</p>
              </div>
            </div>
          </div>
          <!-- /.carousel-inner -->
          <a class="left carousel-control" href="#lightbox" role="button" data-slide="prev">
            <span class="glyphicon glyphicon-chevron-left"></span>
          </a>
          <a class="right carousel-control" href="#lightbox" role="button" data-slide="next">
            <span class="glyphicon glyphicon-chevron-right"></span>
          </a>
        </div>
        <!-- /.modal-body -->
      </div>
      <!-- /.modal-content -->
    </div>
    <!-- /.modal-dialog -->
  </div>
  <!-- /.modal -->

</div>
<!-- /.container -->

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>