根据活动的引导轮播幻灯片更改内容答案

【问题标题】：Change content based on active Bootstrap Carousel Slide根据活动的引导轮播幻灯片更改内容
【发布时间】：2020-03-01 12:51:34
【问题描述】：

我刚刚从 bootstrap 网站获取了基本的轮播，并希望将其集成到我的 Web 应用程序中。我的问题是我想根据轮播的当前活动幻灯片来调整我网站的内容……这可能吗？

如果第一张幻灯片处于活动状态，我想显示 div One，如果第二张幻灯片处于活动状态，我想显示 div Two。

我想我只需要获取轮播的活动索引来编写我的 js 脚本？

<div class="bd-example">
        <div id="carouselExampleCaptions" class="carousel slide" data-interval="false">
          <ol class="carousel-indicators">
            <li data-target="#carouselExampleCaptions" data-slide-to="0" onclick="changeContentBasedOnActiveSlide()" class="active"></li>
            <li data-target="#carouselExampleCaptions" data-slide-to="1" onclick="changeContentBasedOnActiveSlide()"></li>
          </ol>
          <div class="carousel-inner">
            <div class="carousel-item active" id="one">
              <img src="https://images.squarespace-cdn.com/content/v1/5600f472e4b0a4c5b4e2f083/1556255337364-97VLFN57A2DNWR9UQOB8/ke17ZwdGBToddI8pDm48kNvT88LknE-K9M4pGNO0Iqd7gQa3H78H3Y0txjaiv_0fDoOvxcdMmMKkDsyUqMSsMWxHk725yiiHCCLfrh8O1z5QPOohDIaIeljMHgDF5CVlOqpeNLcJ80NK65_fV7S1USOFn4xF8vTWDNAUBm5ducQhX-V3oVjSmr829Rco4W2Uo49ZdOtO_QXox0_W7i2zEA/40743.jpg?format=2500w" class="d-block w-100" alt="...">
              <div class="carousel-caption d-none d-md-block">
                <h5>One</h5>
                <p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
              </div>
            </div>
            <div class="carousel-item" id="two">
              <img src="https://images.squarespace-cdn.com/content/v1/5600f472e4b0a4c5b4e2f083/1556255337364-97VLFN57A2DNWR9UQOB8/ke17ZwdGBToddI8pDm48kNvT88LknE-K9M4pGNO0Iqd7gQa3H78H3Y0txjaiv_0fDoOvxcdMmMKkDsyUqMSsMWxHk725yiiHCCLfrh8O1z5QPOohDIaIeljMHgDF5CVlOqpeNLcJ80NK65_fV7S1USOFn4xF8vTWDNAUBm5ducQhX-V3oVjSmr829Rco4W2Uo49ZdOtO_QXox0_W7i2zEA/40743.jpg?format=2500w" class="d-block w-100" alt="...">
              <div class="carousel-caption d-none d-md-block">
                <h5>Two</h5>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
              </div>
            </div>
          </div>
          <a class="carousel-control-prev" href="#carouselExampleCaptions" role="button"  onclick="changeContentBasedOnActiveSlide()" data-slide="prev">
            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
            <span class="sr-only">Previous</span>
        </button>
          <a class="carousel-control-next" href="#carouselExampleCaptions" role="button" onclick="changeContentBasedOnActiveSlide()" data-slide="next">
            <span class="carousel-control-next-icon" aria-hidden="true"></span>
            <span class="sr-only">Next</span>
          </a>
        </div>
      </div>

<div id="divOne">
  Slide One
</div>

<div id="divTwo">
  Slide Two
</div>

感谢答案，我解决了一些问题。这对我有用...肯定可以改进...

function changeContentBasedOnActiveSlide(){

    var slideOne = document.getElementById("one").className;
    var slideTwo = document.getElementById("two").className;

    var one = document.getElementById("divOne");
    var two = document.getElementById("divTwo");

    if(slideOne.localeCompare("carousel-item active") === 0){
        one.style.display = "none";
        two.style.display = "block";
    } else if(slideTwo.localeCompare("carousel-item active") === 0){
        one.style.display = "block";
        two.style.display = "none";
    } else {
        console.log("No active slide.")
    }

}

【问题讨论】：

向我们展示您的轮播代码
没有轮播的代码，因为它是由引导程序制作的组件。我刚刚包含了引导脚本。

标签： javascript jquery html bootstrap-4 carousel

【解决方案1】：

您可以为下一个/上一个按钮添加功能。使用 carousel-item 向两个 div 添加额外的类以使其独一无二。在按下下一个/上一个后，检查活动 div 是否具有该唯一类，然后显示 div 类“一”或“二”。

【讨论】：