根据活动 Bootstrap 轮播幻灯片更改内容

Question

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

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

我想我只需要获取轮播的活动索引来编写我的 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.")
    }

}

Answer 1

您可以向 next/prev 按钮添加功能。添加额外的 classes 到两个 divs with carousel-item 以使其独一无二。在按下 next/prev 之后，您检查 active div 是否具有唯一的 class，然后显示 div class "one" 或 "two"。

根据活动 Bootstrap 轮播幻灯片更改内容

Change content based on active Bootstrap Carousel Slide

html

javascript

jquery

carousel

bootstrap-4