Question

我尝试在单个网页中添加2个嵌套的Bootstrap-4轮播失败，但未成功。我用2张幻灯片设置了一个外部轮播。在第一张幻灯片上，我设置了一个带有2张幻灯片的内部轮播。加载页面后，外部轮播开始。第一个外部滑轨正确加载，其内部传送带正确前进，并正确地通过2个内部滑轨。但是，当外部轮播移动到第二张幻灯片时，只有空白页，外部轮播循环中断。有什么建议吗？

<html>
  <head>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
  </head>
  <body>
    <div id="myCarousel" class="carousel slide" data-ride="carousel" data-interval="1000">
      <div class="carousel-inner">
        <!-- 1st OUTER SLIDE -->
        <div class="carousel-item active">
          <h1 class="display-1 text-center">OUTER SLIDE 1</h1>
          <div class="col">
            <!-- BEGIN INNER CAROUSEL -->
            <div id="myInnerCarousel" class="carousel slide" data-ride="carousel" data-interval="1000">
              <div class="carousel-inner">
                <div class="carousel-item active">
                  <h1 class="display-1 text-center">INNER SLIDE 1</h1>
                </div>
                <div class="carousel-item">
                  <h1 class="display-1 text-center">INNER SLIDE 2</h1>
                </div>
              </div>
            </div>
            <!-- END INNER CAROUSEL -->
          </div>
        </div>
        <!-- END 1st OUTER SLIDE -->
        <!--2nd OUTER SLIDE -->
        <div class="carousel-item">
          <h1 class="display-1 text-center">OUTER SLIDE 2</h1>
        </div>
        <!-- END 2nd OUTER SLIDE -->
      </div>
    </div>
  </body>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>  
</html>

如何在网页中包含嵌套轮播？

0 个答案: