Search code examples
jquerytwitter-bootstrapcarouseljquery-events

Detect whenever Boostrap carousel cycles automatically

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 :

enter image description here

Solution

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