How can I pause a Bootstrap Carousel on hover and resume it on mouse-out?

Question

I have a Bootstrap Carousel on my website.

When the user hovers over an element #formcontainer, I\'d like to pause the carousel. And when I hover off, I

Answer 1

This will work!

(function($) {
$(document).ready(function(){
    $('.carousel').carousel({
        pause: 'hover'
    });

}); }(jQuery));

Answer 2

Use carousel cycle method on mouseleave event

$('#formcontainer').hover(function(){
   $("#myCarousel4").carousel('pause');
},function(){
   $("#myCarousel4").carousel('cycle');
});

Answer 3

jQuery's hover function has an implementation that takes two arguments: a hover in handler and a hover out handler:

$('#foo').hover(function() {
    // handler in
}, function() {
    // handler out
});

When you pass it just one argument, the function you give it handles both the in and out events, so you're pausing it on both mouse enter and mouse out.

You need to pass it separate handlers:

$('#myCarousel4').hover(function() {
    $(this).carousel('pause');
}, function() {
    $(this).carousel('cycle');
});

Note that we can use this to refer to the carousel rather than rewriting its ID. Inside jQuery event handlers, this always refers to the object you bound the event to when possible.