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

laximzn5 于 2022-12-16 发布在 Bootstrap

关注(0)|答案(2)|浏览(143)

晚上好，
抱歉，这可能是一个非常愚蠢的问题，我还在学习！
我正尝试将 Bootstrap 轮播中的活动幻灯片作为目标来执行某个操作。我希望它能触发三张幻灯片中每一张的一些样式更改，即更改按钮颜色等。
早些时候我试着用数字（#1, #2, #3）来定位divs，但是总是被卡住，看起来像这样;

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

我对每张幻灯片重复了这个过程，并对每个div使用了:visible和:hidden，尽管我似乎只在最后一次演示风格颜色变化时遇到了麻烦。
我做了一些搜索，我看到人们使用.carousel(1)，但我似乎只是不断进入死胡同，有人能给予我一把吗，不知道为什么它没有赶上，任何指导将不胜感激。

超文本标记语言

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

Java脚本

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

twitter-bootstrap

来源：https://stackoverflow.com/questions/30361799/how-to-target-bootstrap-carousels-active-slide

2条答案

按热度按时间

b1uwtaje1#

编辑：此答案是为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事件，当滑块完成滑动时调用该事件。
您可以在www.example.com上了解它们之间的差异https://getbootstrap.com/docs/3.3/javascript/#carousel-events。
注意ev是事件对象，当事件被触发时，它被传递到onSlide回调函数。注意名称ev可以被更改为任何值，例如event，它是回调函数中参数的顺序，决定了它的值，而不是它的名称。这里事件对象作为回调函数的第一个参数被传递。这不是由于上述代码相应地命名了参数ev（尽管这有助于理解），但jQuery代码调用如何在事件处理程序中传递（事件处理程序是一种用于事件的回调形式）以及引导代码如何触发事件。事件对象具有常规JavaScript事件的公共属性，并且它具有这里在用于轮播事件的 Bootstrap 4文档中给出的附加属性（其当前属性在下面以及黄色引号块中示出）。

方向：转盘滑动的方向（“左”或“右”）。
相关目标：作为活动项滑动到位的DOM元素。
from：当前项目的索引。
至：下一项的索引。

赞(0）回复(0）举报 2022-12-16

kxkpmulp2#

您可以使用自引导事件参数“from”和“to”获取如下索引：

var myCarousel = document.getElementById('#myCarousel')

    myCarousel.addEventListener('slide.bs.carousel', function (ev) {
        console.log(ev.from);
    })

赞(0）回复(0）举报 2022-12-16

我来回答

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

2条答案

相关问题

热门标签

最新问答