Карусель не отображается в модальном всплывающем окне, вместо этого используется стек изображений - PullRequest
Новая
       19

Карусель не отображается в модальном всплывающем окне, вместо этого используется стек изображений

0 голосов
/ 23 мая 2019

Мне нужно нажать на одно изображение на моей странице и получить модальное всплывающее окно, содержащее карусель с разными изображениями (без белой рамки на изображениях и только с х в модальном заголовке).Тем не менее, все, что я нашел, связанное с этим онлайн, показывает результат работы модального всплывающего окна, но изображения карусели накладываются друг на друга, а не образуют карусель.Даже кодепы, работающие с каруселью, в режиме онлайн укладывают изображения вместо этого, когда я пытаюсь использовать код карусели.Я что-то пропустил?

Пробные кодовые ручки и много онлайн-ресурсов, но моя модальная карусель всегда складывает изображения вместо формирования карусели

, обобщенный 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>
...