Question

我需要单击页面上的单个图像，并有一个模态弹出窗口，其中包含不同图像的轮播（图像上没有白色边框，而模态标题中只有x）。但是，我在此网上找到的所有内容都显示了使用模式弹出窗口的结果，但是轮播图片会一个叠加在另一个之上，而不是组成一个轮播。当我尝试使用轮播代码时，即使是使用在线轮播的代码库也可以将图像堆叠起来。我想念什么吗？

尝试过码本和许多在线资源，但我的模式轮播总是堆叠图像而不是形成轮播

摘要html

<!DOCTYPE html>
<html lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <title>Circuits/Coding</title>
    <link rel="icon" href="../logo2.png">

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
  <!-- jQuery library -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <!-- Popper JS -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
  <!-- Latest compiled JavaScript -->
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
  <link href="carousel.css" rel="stylesheet">
</head>
  <body>
    <a href="#MyCarousel" class="launch-modal2" data-modal-id="modal-video2">
        <img class="bd-placeholder-img bd-placeholder-img-lg featurette-image img-fluid mx-auto" src="3dChar/pic2.jpg" alt="pic1" width="500" height="500">
      </a>
      <div class="modal fade" id="modal-video2" tabindex="-1" role="dialog" aria-labelledby="modal-video-label">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
<div class="modal-body">
            <!-- Indicators -->
            <div class="carousel slide" id="modal-video2">
                <ol class="carousel-indicators">
                    <li data-target="#modal-video2" data-slide-to="0" class="active"></li>
                    <li data-target="#modal-video2" data-slide-to="1"></li>
                    <li data-target="#modal-video2" data-slide-to="2"></li>
                </ol>
                <!-- Wrapper for slides -->
                <div class="carousel-inner">
                    <div class="item active">
                        <img  src="3dObj/allpieces.jpg" alt="First slide">
                    </div>
                    <div class="item">
                        <img src="3dObj/fish.jpg" alt="Second slide">

                    </div>
                    <div class="item">
                        <img src="3dObj/roboDog.jpg" alt="Third slide">

                    </div>
                </div>
                <!-- Controls -->
                <a href="#modal-video2" class="left carousel-control" data-slide="prev"><span class="icon-prev"></span></a>
                <a href="#modal-video2" class="right carousel-control" data-slide="next"><span class="icon-next"></span></a>
            </div>
        </div>
        </div>
    </div>
</div>


  </body>
  <script type="text/javascript">

    $(function(){
// open the modal
$('.launch-modal2').on('click', function(e){
e.preventDefault();
$( '#' + $(this).data('modal-id') ).modal();
}); // reload the modal contents when it is closed
$("#modal-video2").on("hidden.bs.modal", function () {
var url = $('#video-frame2').attr('src');
$('#video-frame2').attr('src', '');
$('#video-frame2').attr('src', url);
});
});
  </script>
  </html>

轮播未在模式弹出窗口中显示，而是图像堆栈

0 个答案: