Carrousel hover actions stack in JQuery

Question

I am trying to make a carrousel that changes the content (mostly images) and I am using (obviously) indicators for that and a user should be able to change the content just by hovering these indicators (not even having to click them) to make this happen. I decided to make use of the Bootstrap carrousel and my current code now looks like this:

$(document).ready(function() {
  $("#carousel-example-generic li").hover(function() {
    if ($("#carousel-example-generic li").hasClass("active")) {
      $("#carousel-example-generic li").removeClass("active");
      $(this).addClass("active");
      $("#carousel-example-generic").carousel($(this).data("slide-to"));
    }
  });
});

#carousel-example-generic {
  background-color: black;
}
#carousel-example-generic .carousel-indicators {
  left: auto;
  width: auto;
  margin-left: auto;
}
#carousel-example-generic .carousel-indicators li {
  display: block;
  width: 200px;
  /* How should I change height?: */
  height: 124px;
  border: 0;
  border-radius: 0;
  margin: 1px 0 0 0;
  background-color: red;
  text-indent: 0;
  color: #fff;
}
#carousel-example-generic .carousel-indicators li.active {
  background-image: none;
  background-color: #009fc3;
}
@media screen and (min-width: 768px) {
  #carousel-example-generic .carousel-indicators {
    bottom: auto;
  }
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<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">One</li>
    <li data-target="#carousel-example-generic" data-slide-to="1">Two</li>
    <li data-target="#carousel-example-generic" data-slide-to="2">Three</li>
    <li data-target="#carousel-example-generic" data-slide-to="3">Four</li>
  </ol>

  <!-- Wrapper for slides -->
  <div class="carousel-inner" role="listbox">
    <div class="item active">
      <img src="https://i.gyazo.com/c5db60017df38a133a6f126a2d6ea691.png" alt="...">
      <div class="carousel-caption">
        First one
      </div>
    </div>
    <div class="item">
      <img src="https://i.gyazo.com/c5db60017df38a133a6f126a2d6ea691.png" alt="...">
      <div class="carousel-caption">
        Then two
      </div>
    </div>
    <div class="item">
      <img src="https://i.gyazo.com/c5db60017df38a133a6f126a2d6ea691.png" alt="...">
      <div class="carousel-caption">
        Third slide
      </div>
    </div>
    <div class="item">
      <img src="https://i.gyazo.com/c5db60017df38a133a6f126a2d6ea691.png" alt="...">
      <div class="carousel-caption">
        Last slide
      </div>
    </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>
  -->
</div>

JSFiddle

The problem is that with this code, everytime I hover over an indicator, it will be stored as an action in a "queue" or "stack" up everytime a hover happened. So if I move very quickly up and down with the cursor above the indicators, the carousel still tries to do every action that is "saved?" in that "queue" or "stack". Is there anyone that can explain me what is happening and how I can make my idea work fine (prevent the actions from being "stacked") and instantly go to the next "slide" on hover? Is it possible to keep the solution close to the JQuery I used, i.e. I'm making use of the Bootstrap carrousel indicators which already have Bootstrap JavaScript running on them?

Answer 1

I solved this using a simple "timeout" solution.

$(document).ready(function() {

  var itemNum = null;
  var timeoutId = null;

  $("#carousel-example-generic li").hover(
    function() {
        $("#carousel-example-generic li").removeClass("active");
        $(this).addClass("active");
        itemNum = $(this).data("slide-to")
        timeoutId = setTimeout(
            function() {
               if(itemNum != null) {
                    $("#carousel-example-generic").carousel(itemNum);
               }
         }, 200);
    }, 
    function() {
        clearTimeout(timeoutId);
    }
  );

});

JSFiddle

"onHover" you still removing and adding active classes for the li tags, but now you are adding timeout for changing the slider.

In the timeout, you add a 200 milisecounds waiting period for all hover functions to stop, and when its all done, you change it to the slider.

The final phase is making sure that if the hover was disabled (on mouse out), you clear the timeout.

This will make your carrousel nice and smooth.

Good Luck!

Answer 2

Quick answer: Forget about timeouts, just don't push unwanted actions to stack.

Sadly bootstraps Carousel doesn't have any public function to test if it is currently animating or not. BUT it changes the DOM tree when it does. Just check if classes .next and .prev are present before you push another action into the stack.

From this point its fairly easy. Change your JavaScript code to something like this:

  $(document).ready(function() {

      var slideshow = $('#carousel-example-generic');

      // Fire The click event to switch slides on hover
      // But only when .next or .prev classes are not present AKA carousel is currently not animating.

      slideshow.find('li').hover(function() {
        if ((slideshow.find('.next, .prev').length === 0)){
            $(this).click();
        }
      });

     // Initialize the carousel
     slideshow.carousel();
});

$(document).ready(function() {

  var slideshow = $('#carousel-example-generic');
  
  // Fire The click event to switch slides on hover
  // But only when .next or .prev classes are not present AKA carousel is currently not animating.
	slideshow.find('li').hover(function() {
		if ((slideshow.find('.next, .prev').length === 0)){
			$(this).click();
		}
  });

  // Initialize the carousel
  slideshow.carousel();
});

#carousel-example-generic
{
  background-color: black;
}

#carousel-example-generic .carousel-indicators
{
    left: auto;
    width: auto;
    margin-left: auto;
}

#carousel-example-generic .carousel-indicators li
{
    display: block;
    width: 200px;
    /* How should I change height?: */
    height: 124px;
    border: 0;
    border-radius: 0;
    margin: 1px 0 0 0;
    background-color: red;
    text-indent: 0;
    color: #fff;
}

#carousel-example-generic .carousel-indicators li.active
{
    background-image: none;
    background-color: #009fc3;
}

@media screen and (min-width: 768px)
{
    #carousel-example-generic .carousel-indicators
    {
        bottom: auto;
    }
}

<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">One</li>
    <li data-target="#carousel-example-generic" data-slide-to="1">Two</li>
    <li data-target="#carousel-example-generic" data-slide-to="2">Three</li>
    <li data-target="#carousel-example-generic" data-slide-to="3">Four</li>
  </ol>

  <!-- Wrapper for slides -->
  <div class="carousel-inner" role="listbox">
    <div class="item active">
      <img src="https://i.gyazo.com/c5db60017df38a133a6f126a2d6ea691.png" alt="...">
      <div class="carousel-caption">
        First one
      </div>
    </div>
    <div class="item">
      <img src="https://i.gyazo.com/c5db60017df38a133a6f126a2d6ea691.png" alt="...">
      <div class="carousel-caption">
        Then two
      </div>
    </div>
    <div class="item">
      <img src="https://i.gyazo.com/c5db60017df38a133a6f126a2d6ea691.png" alt="...">
      <div class="carousel-caption">
        Third slide
      </div>
    </div>
    <div class="item">
      <img src="https://i.gyazo.com/c5db60017df38a133a6f126a2d6ea691.png" alt="...">
      <div class="carousel-caption">
        Last slide
      </div>
    </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>
  -->
</div>

-- Foot notes: You were using the carousel plugin kinda wrong. Your code initialized the plugin every time you hovered the switches. Also the "slide to" function is built-in in data attributes so it's enough to fire the "virtual" click event on the corresponding switch (li) and the plugin will do the rest.