Detect whenever Boostrap carousel cycles automatically

Question

I am trying to detect whenever the bootstrap carousel is sliding automatically but I can't find anyway of doing so... No info on the slid.bs.carousel that tells if the user triggered the event or if it was triggered by the automatic scroll (bootstrap sliding intervals).

One way I tried to solve this was by detecting if the bootstrap slid.bs.carousel event was triggered by a user's interaction by binding a function who adds a propriety and it's value to the event once the user triggers it and assuming the slide was automatic if the value wasn't equal to "scroll" (see screenshot). But it seems like I am having a sequence error in this case because when I console.log the event I see the value but once I try to access this value it's undefined ... Here's an illustration :

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 CODE

    $(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>");
    })    
})