每当Boostrap轮播自动循环时检测 [英] Detect whenever Boostrap carousel cycles automatically

问题描述

我试图检测自举旋转木马何时自动滑动但我无论如何也找不到这样做...没有关于slid.bs.carousel的信息，它告诉用户是否触发了事件或是否触发了事件通过自动滚动（引导滑动间隔）。

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

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

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 :

推荐答案

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

In bootstrap carousel when a slide needs to be changed the Slide function in being called. Inside the slide function the code is triggering a custom event called 'slide.bs.carousel' and the original window.event is not being passed to the custom event. Even for both click and slide on timer this same slide function is being called. In order to achieve the functionality you require you can check for window.event in the callback function passed to the on function. Please refer to this http://codepen.io/osha90/pen/PqXGqQ pen to see how it works.

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

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

这篇关于每当Boostrap轮播自动循环时检测的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！