How not to stop owl carousel on hover?

Question

Currently the carousel stops when you hover it, I've added autoplayHoverPause:false but it doesn't seem to change anything. Is there another option that I could use to stop it from stopping when it's hovered?

$('.owl-carousel').owlCarousel({
    autoplayHoverPause:false,
    loop:true,
    margin:0,
    nav:true,
    responsive:{
        0:{
            items:1
        },
        600:{
            items:2
        },
        1000:{
            items:4
        }
    }
});

`autoplayHoverPause` is correct property. Moreover, `false` is a default value for `autoplayHoverPause`, so it shouldn't pause carousel on hover even if you don't set this property. — Yeldar Kurmangaliyev, Sep 30 '15 at 08:09
just remove "autoplayHoverPause: false" line and it will not stop, it will loop forever — emir, Jun 07 '17 at 23:34

score 9 · Answer 1 · edited Jun 17 '20 at 21:26

9

To stop the slide on hover just add the following to your script:

autoplayHoverPause:true

edited Jun 17 '20 at 21:26

shaunakde

3,009
3
24
39

answered Jun 17 '20 at 13:13

Nadeem

259
3
3

score 3 · Answer 2 · answered Jan 20 '16 at 23:13

3

As j.rey noted, it seems stopOnHover is the correct way to start/stop autoplay on hover per the specs on this page:

http://owlgraphic.com/owlcarousel/#customizing

I don't see any reference to autoplayHoverPause in the docs. Maybe that was an older version?

answered Jan 20 '16 at 23:13

contendia

161
2
9

1

`autoplayHoverPause` is in [docs here](https://owlcarousel2.github.io/OwlCarousel2/docs/api-options.html#autoplayhoverpause) but `stopOnHover` is not! – Imran Bughio Mar 15 '17 at 13:35

score 1 · Answer 3 · answered Dec 06 '17 at 20:05

1

Just add stopOnHover:true in your script.

answered Dec 06 '17 at 20:05

Smrity Ray

19
1

Wouldn't that actually have the opposite effect? They want it to continue when hovering, and setting this parameter seems like it would cause it to stop when you hover... – Taegost Dec 06 '17 at 20:31

score 0 · Answer 4 · answered Oct 01 '15 at 08:57

0

set autoplayHoverPause:false

Fiddle

answered Oct 01 '15 at 08:57

Anjith K P

2,158
27
35

score 0 · Answer 5 · answered May 19 '16 at 07:14

0

stopOnHover:true https npmjs.com package react-owl-carousel

answered May 19 '16 at 07:14

ddd

1

score 0 · Answer 6 · edited Oct 18 '21 at 14:53

0

stopOnHover:true https npmjs.com package react-owl-carousel

Use mouseDrag : false.

edited Oct 18 '21 at 14:53

Dinith Rukshan Kumara

638
2
10
19

answered Nov 22 '16 at 06:14

Rumit Patel

8,830
18
51
70

score 0 · Answer 7 · edited Feb 02 '17 at 12:12

0

You can try to modify hover css which is created through owl.carousle.js

<script>
$(".owl-wrapper-outer").mouseover(function(){
                $('.owl-wrapper').css({
                "-webkit-transition": "",
                "-moz-transition": "",
                "-o-transition": "",
                "transition": "",  
                    });

                });
</script>

edited Feb 02 '17 at 12:12

javaDeveloper

1,403
3
28
42

answered Feb 02 '17 at 10:52

Chirag Makwana

1

How not to stop owl carousel on hover?

7 Answers7