如何定位bootstrap carousel的主动幻灯片？

Question

晚间,

对此抱歉可能是一个非常愚蠢的问题,我还在学习!

我正在尝试将引导旋转木马中的活动幻灯片作为目标来执行操作.我想让它为三个幻灯片中的每一个触发一些样式更改,即更改按钮颜色等.

之前我曾尝试用他们的数字(#1, #2, #3)来定位div ,但也一直卡在那里,它看起来像这样;

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 docs 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.