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

admin管理员组

文章数量:1241097

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');
    });
});

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');
    });
});

• javascript
• jquery
• twitter-bootstrap
• bootstrap-carousel

Share Improve this question Follow edited Dec 9, 2016 at 13:43 doppelgreener 5,1041010 gold badges4848 silver badges6767 bronze badges asked Dec 9, 2016 at 13:24 michaelmcgurkmichaelmcgurk 6,5092525 gold badges100100 silver badges197197 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 9

Use carousel cycle method on mouseleave event

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

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.

This will work!

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

}); }(jQuery));

本文标签： javascriptHow can I pause a Bootstrap Carousel on hover and resume it on mouseoutStack Overflow