如何定位引导轮播活动幻灯片？

Question

晚上，

抱歉，这可能是一个非常愚蠢的问题，我仍在学习！

我正在尝试定位引导轮播中的活动幻灯片以执行操作。我希望它为三张幻灯片中的每一张触发一些样式更改，即更改按钮颜色等。

之前我尝试只通过数字来定位 div (#1, #2, #3)，但也一直卡在那里，看起来像这样；

var shead = document.getElementById("sub-head");
if ($('#1').is(':visible') && $('#2').is(':hidden') && $('#3').is(':hidden')) {   
    shead.style.color = "blue";
}

我对每张幻灯片使用:visible 和:hidden 相应地对每个div 重复了此操作，尽管我似乎只是被样式颜色更改的最后一次演示卡住了。

我对此进行了一些搜索，并且我看到有人使用.carousel(1)，但我似乎一直在死胡同，谁能帮我解决这个问题，不知道为什么它不流行，任何指导都会不胜感激。

HTML

<header id="Carousel" class="carousel slide carousel-fade">

    <ol class="carousel-indicators">
        <li data-target="Carousel" data-slide-to="0" class="active"></li>
        <li data-target="Carousel" data-slide-to="1"></li>
        <li data-target="Carousel" data-slide-to="2"></li>
    </ol>

    <div class="carousel-inner">
       <div class="item active" id="1"></div>
       <div class="item" id="2"></div>
       <div class="item" id="3"></div>
    </div>

</header>

JAVASCRIPT

if ($('#Carousel').carousel(1).hasClass('active')) {
    alert("this is an alert");
}

Answer 1

编辑：这个答案是为 Bootstrap 3 编写的，但它也应该适用于 bootstrap 4。请参阅以下链接以获取 bootstrap 4 文档https://getbootstrap.com/docs/4.0/components/carousel/#events。

Bootstrap 具有您可以挂钩的自定义事件。

当方法要滑动时会触发这个事件。

$('#Carousel').on('slide.bs.carousel', function onSlide (ev) {
  var id = ev.relatedTarget.id;
  switch (id) {
    case "1":
      // do something the id is 1
      break;
    case "2":
      // do something the id is 2
      break;
    case "3":
      // do something the id is 3
      break;
    default:
      //the id is none of the above
  }
})

还有一个slid.bs.carousel 事件。当滑块完成滑动时调用该事件。

你可以在这里https://getbootstrap.com/docs/3.3/javascript/#carousel-events阅读差异。

附：请注意，ev 是在事件触发时传递给onSlide 回调的事件对象。请注意，名称ev 可以更改为任何名称，例如event，它是回调中参数的顺序决定了它的值而不是它的名称。这里事件对象作为回调的第一个参数传入，这不是因为上面的代码已经相应地命名了参数ev（虽然这有助于理解），而是通过事件处理程序中的jQuery代码调用方式（事件处理程序是一种用于事件的回调形式）以及引导代码如何触发事件。事件对象具有与regular JavaScript event 相同的属性，并且具有the bootstrap 4 docs for carousel events 中给出的其他属性（其当前属性在下面以及黄色引号块中显示）。

direction：轮播的滑动方向（“左”或“右”）。
relatedTarget：正在滑动的 DOM 元素作为活动项目的位置。
from：当前项目的索引。
to：下一个项目的索引。