CODEWITHSUNDEEP
javascriptjquerytwitter-bootstrapbootstrap-carousel
michaelmcgurk
michaelmcgurk

Reputation: 6509

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

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'd like to continue the cycle of the carousel. The first part works fine with the following code, but not the second. Can someone assist?

$(document).ready(function() {
    $('.carousel').carousel({
        interval: 1200,
        pause: "hover"
    });

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

Upvotes: 5

Views: 10924

Answers (3)

Varsha Dhadge
Varsha Dhadge

Reputation: 1751

This will work!

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

}); }(jQuery));

Upvotes: 1

doppelgreener
doppelgreener

Reputation: 5094

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.

Upvotes: 3

Satpal
Satpal

Reputation: 133403

Use carousel cycle method on mouseleave event

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

Upvotes: 9

Related Questions