检测 Bootstrap 轮播何时自动循环

Question

我正在尝试检测引导轮播何时自动滑动，但无论如何我都找不到这样做... slid.bs.carousel 上没有信息可以告诉用户是否触发了事件或是否触发了事件通过自动滚动（引导滑动间隔）。

我尝试解决此问题的一种方法是通过绑定一个函数来检测引导 slid.bs.carousel 事件是否由用户的交互触发，该函数在用户触发事件后将其添加到事件中并假设如果值不等于“滚动”，则幻灯片是自动的（参见屏幕截图）。但在这种情况下，我似乎遇到了序列错误，因为当我 console.log 事件时，我看到了该值，但是一旦我尝试访问该值，它就未定义......这是一个插图：

Answer 1

在需要更改幻灯片时，在引导轮播中调用 Slide 函数。在幻灯片函数中，代码触发了一个名为“slide.bs.carousel”的自定义事件，并且原始 window.event 没有传递给自定义事件。即使对于单击和在计时器上滑动，也会调用相同的滑动功能。为了实现您需要的功能，您可以在传递给 on 函数的回调函数中检查 window.event。请参考此http://codepen.io/osha90/pen/PqXGqQ 笔以了解其工作原理。

  <div id="carousel-example-generic" class="carousel slide" data-ride="carousel"><!-- Indicators -->
<ol class="carousel-indicators">
  <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
  <li data-target="#carousel-example-generic" data-slide-to="1"></li>
</ol>

<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
  <div class="item active">

  </div>
  <div class="item">

  </div>

</div>

<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
  <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
  <span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
  <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
  <span class="sr-only">Next</span>
</a>

CSS 代码

  .item{
 width: 100%;
height: 400px; 
}
.item:first-of-type{
  background-color: pink;
}
.item:last-of-type{
  background-color: grey;
}

JS 代码

    $(function(){
    $("#carousel-example-generic").carousel();
    $("#carousel-example-generic").on('slide.bs.carousel',function(e){
      if(window.event){
        $("body").append("<p>Sliding Manually</p>");
      } else {
        $("body").append("<p>Sliding Automatically</p>");
    })    
})