html - 同一页面上的多个引导模式轮播，不起作用

问题描述

我有一个投资组合页面，包含 12 个项目。单击其中一个项目时，会弹出一个模式弹出窗口，您也可以单击以查看图像库，我在其中使用引导程序轮播。

对于每个项目，我都有一个带有轮播的模式。对于项目 1，它工作得很好。但是，一旦我对项目 2 使用相同的代码，并更改项目 2 的一些特定 id，轮播就不起作用 - 图像根本不会滑动。我尝试更改 id "demo" 以便每个轮播都是唯一的。但不幸的是，它仍然没有奏效。

除此之外，我对我的引导模式的行为/外观非常满意，我想保留它。

 <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>

<link rel="stylesheet" type="text/css" href="stylesheet.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>


</head>



<body>


<div class="content">

        <div id="contact">
                <a href="">About</a>
               &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Contact: c.thornval@live.dk &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 0045 &nbsp;7158&nbsp;0488
               <br>
               <br>
        </div>

    <ul style="list-style: none;">



        <li class="Project" data-modal="myModal_1">

                    <span id="myBtn_1">
                        Wer Baut Der Stadt
                    </span>

                    <span id="year">
                        2019
                    </span>

                    <div class="Describtion">
                        <p style="display:none;">
                          Identity and Font developed for the lecture series on architecture conducted by No Image in Berlin.
                        </p>
                    </div>

                
                    <div id="myModal_1" class="modal">
                     <div class="modal-content">

                    <div id="demo" class="carousel slide" data-ride="carousel">
                          
                          <!-- The slideshow -->
                          <div class="carousel-inner">

                            <div class="carousel-item active">    
                            <img src="Images/CAFX/IMG_0546 (1)_Cafx_3-kopi.png" width="100%">
                            </div>
                            <div class="carousel-item">
                              <img src="Images/CAFX/IMG_0546 (1)_Cafx_3-kopi.png" width="100%">
                            </div>
                          
                          
                          <!-- Left and right controls -->
                          <a class="carousel-control-prev" href="#demo" data-slide="prev">
                            <span class="carousel-control-prev-icon"></span>
                          </a>
                          <a class="carousel-control-next" href="#demo" data-slide="next">
                            <span class="carousel-control-next-icon"></span>
                          </a>
                          </div>

                         <p>Some text in the Modal..1
                        </p>
                    </div>
        </li>
              


            <li class="Project" data-modal="myModal_2">

                    <span id="myBtn_2">
                        Hans Oscar Carlsson
                    </span>

                    <span id="year">
                        2019
                    </span>

                    <div class="Describtion">
                        <p style="display:none;">
                          Identity and Font developed for the lecture series on architecture conducted by No Image in Berlin.
                        </p>
                    </div>

                     <div id="myModal_2" class="modal">
                     <div class="modal-content">

                    <div id="demo" class="carousel slide" data-ride="carousel">
                          
                          <!-- The slideshow -->
                          <div class="carousel-inner">

                            <div class="carousel-item active">    
                            <img src="Images/WER BAUT 2018/HVIDAktiv 20.png" width="100%">
                            </div>
                            <div class="carousel-item">
                              <img src="Images/WER BAUT 2018/poster_mockup_MD1 kopi 2-kopi.jpg" width="100%">
                            </div>
                          
                          
                          <!-- Left and right controls -->
                          <a class="carousel-control-prev" href="#demo" data-slide="prev">
                            <span class="carousel-control-prev-icon"></span>
                          </a>
                          <a class="carousel-control-next" href="#demo" data-slide="next">
                            <span class="carousel-control-next-icon"></span>
                          </a>
                          </div>

                         <p>Some text in the Modal..1
                        </p>
                    </div>
        </li>

标签： htmlimagebootstrap-modalcarousel

html - 同一页面上的多个引导模式轮播，不起作用

问题描述

解决方案

推荐阅读