每当 Bootstrap 轮播自动循环时检测

Question

我正在尝试检测 bootstrap 旋转木马何时自动滑动，但无论如何我都找不到这样做... slid.bs.carousel 上没有信息表明用户是否触发了事件或者它是否由自动滚动触发（bootstrap 滑动间隔）。

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

Answer 1

在bootstrap轮播中当需要更换幻灯片时调用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>");
    })    
})

每当 Bootstrap 轮播自动循环时检测

Detect whenever Boostrap carousel cycles automatically

jquery

carousel

twitter-bootstrap

jquery-events