Question

所以我遇到了一个问题，我的html轮播元素看起来像这样

   <div id="carousel" class="carousel slide" data-ride="carousel" data-interval="false">
        <!-- First Carousel Inner -->
        <div class="carousel-inner">
          <div class="carousel-item active">
            <img class="portfolio-image" src="https://www.w3schools.com/bootstrap/la.jpg" alt="Los Angeles">
          </div>
          <div class="carousel-item">
            <img class="portfolio-image" src="https://www.w3schools.com/bootstrap/chicago.jpg" alt="Chicago">
          </div>
          <div class="carousel-item">
            <img class="portfolio-image" src="https://www.w3schools.com/bootstrap/ny.jpg" alt="New York">
          </div>
        </div>
        <!-- Second Carousel Inner -->
        <div class="carousel-inner">
          <div class="carousel-item active">
            <img class="portfolio-image" src="https://www.w3schools.com/bootstrap/la.jpg" alt="Los Angeles">
          </div>
          <div class="carousel-item ">
            <img class="portfolio-image" src="https://www.w3schools.com/bootstrap/chicago.jpg" alt="Chicago">
          </div>
          <div class="carousel-item">
            <img class="portfolio-image" src="https://www.w3schools.com/bootstrap/ny.jpg" alt="New York">
          </div>
        </div>
        <!-- Left and right controls -->
        <a class="carousel-control-prev carousel-controller" href="#carousel" data-slide="prev">
          <span class="carousel-control-prev-icon"></span>
        </a>
        <a class="carousel-control-next carousel-controller" href="#carousel" data-slide="next">
          <span class="carousel-control-next-icon"></span>
        </a>
      </div>
<button id="button1">ButtonOne</button>
<button id="button2">ButtonTwo</button>

所以有两个按钮首先，所有轮播内部类都显示为：none。现在，如果我单击 ButtonOne ，轮播内置：nth-child（1）将显示并将不会显示carousel-inner：nth-child（2）。

现在发生的事情是，当我单击ButtonTwo时，carousel-inner：nth-child（2）将仅显示第一张图像，并且不会滑动，而ButtonOne可以正常工作并显示所有图像。

我猜测轮播控制器仅访问内部的第一个轮播。

请帮助我。有没有办法使这项工作？预先谢谢你

如何更改引导轮播幻灯片图像的方式

0 个答案: