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>

有没有一种方法可以添加下一个/上一个箭头以在Modal中打开图像后滑动图像？

Answer 1

如何使用插件使您的生活更轻松？

例如，这里有一个名为Slide的插件，当然还有Amazing Slider之类的许多其他选项。

如果您真的想自己构建它，可以从W3Schools follow this link

对于模态内的滑块，您可以使用Lightbox

这里是codepen snippet

.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>

使用Jquery在幻灯片中添加下一个/上一个选项

1 个答案: