Question

我只是从引导网站上获取了基本轮播，并希望将其集成到我的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

您可以将功能添加到下一个/上一个按钮。使用carousel-item向两个div添加其他类，使其具有唯一性。然后按next / prev键，然后检查活动div是否具有该唯一类，然后distplay div类别为“一个”或“两个”。

根据活动的Bootstrap轮播幻灯片

1 个答案: