Is it possible to prevent the Bootstrap carousel pause on mouse hover and continue automatically cycling?

Question

Is it possible to prevent the Bootstrap carousel pause on mouse hover behaviour and continue automatically cycling through the items instead?

The documentation only mentions the default behaviour of pause: "hover", if I change the pause argument to anything else then the carousel stops working altogether so I'm not sure how to disable this default behaviour.

xcer · Accepted Answer · 2012-05-04T00:15:42.133

94

I've found that a value of "false" will cause the carousel to keep cycling during a mouseover:

$('.carousel').carousel({
    pause: "false"
});

I am using Twitter Bootstrap v2.0.2

edited May 04 '12 at 00:15

answered May 04 '12 at 00:08

xcer

1,697
2
16
18

5

User `"pause":"false"` for IE compability! – Gustav Aug 25 '12 at 17:09
1

Works with Bootstrap v3.1.1 too! – HischT Nov 04 '14 at 18:51

score 65 · Answer 2 · answered Nov 14 '14 at 04:17

65

You can add this to the div .carousel too instead of using javascript.

Add delay time:

data-interval="3000"

Add if it pauses on hover or not, options are true and false

data-pause="false"

Example would be:

<div id="carousel" class="carousel" data-ride="carousel" data-interval="3000" data-pause="false">

This worked for me.

answered Nov 14 '14 at 04:17

JCBrown

1,062
10
11

This is a great working solution, I have tried this with Bootstrap 4 on Safari and Chrome. Thanks for the solution! – Wasantha Wijayaratna Mar 28 '19 at 10:30
This is a great working solution, I have tried this with Bootstrap 4 on Safari and Chrome. Thanks for the solution! – Wasantha Wijayaratna Mar 28 '19 at 10:30
1

In newer bootstrap versions, you may have to use "data-bs-..." – blandaadrian Sep 16 '22 at 06:23

score 7 · Answer 3 · answered Apr 20 '15 at 11:52

7

$('.carousel').carousel({
        pause: 'none'
    })

for Bootstrap v3.3.4

answered Apr 20 '15 at 11:52

wpdevramki

171
1
2

2

A few words of explanation would make this example even better. – Thom Apr 20 '15 at 12:13
For Bootstrap 3.3.7 the value should be `null`: http://getbootstrap.com/javascript/#carousel-options – Victor BV Feb 14 '17 at 21:14

score 5 · Answer 4 · answered Jun 13 '22 at 05:19

5

for Bootstrap v5.1

data-bs-pause="false"

Eg: <div class="carousel slide" data-bs-ride="carousel" data-bs-pause="false">

answered Jun 13 '22 at 05:19

Amirshad

101
2
2

the additional "-bs-" was, what did it for me – apparently that changed in some bootstrap version, thanks! – blandaadrian Sep 16 '22 at 06:21

score 2 · Answer 5 · edited Aug 11 '17 at 18:44

2

Bootstrap 4 Remove Pause on hover

$('.carousel').carousel({
    interval: 2000,
    cycle: true,
    pause: "null"
})

edited Aug 11 '17 at 18:44

Ulysse BN

10,116
7
54
82

answered Aug 11 '17 at 18:05

Abdul Razak

76
2

score 2 · Answer 6 · edited Oct 16 '18 at 17:59

2

For anyone still visiting this thread, in the most recent version of 4.1.3, use null without quotations. Maybe quotes were required in previous v.4 versions, but not the case now:

$('.carousel').carousel({
    interval: 2000,
    cycle: true,
    pause: null
})

edited Oct 16 '18 at 17:59

סטנלי גרונן

2,917
23
46
68

answered Oct 16 '18 at 17:20

Nicholas Rotondo

55
8

score 2 · Answer 7 · edited Dec 25 '20 at 13:19

2

In Bootstrap 4 :

data-pause="false"

Eg: <div class="carousel slide" id="carousel" data-pause="false" data-ride="carousel">

This setting prevents the pause.

edited Dec 25 '20 at 13:19

Lajos Arpad

64,414
37
100
175

answered Dec 25 '20 at 13:13

Bijeesh

21
2

score 0 · Answer 8 · answered Sep 11 '17 at 05:53

0

I have found that there are 2 things on which this cycling and pausing depends.

When mouse enters (mouseenter - pause sliding)
When mouse leaves (mouseleave - resume sliding)

Just change following line of code in your js/bootstrap.js file to allow continuous sliding.

.on('mouseenter', $.proxy(this.pause, this)) to

.on('mouseenter', $.proxy(this.**cycle**, this))

answered Sep 11 '17 at 05:53

Yogesh Chaudhari

459
5
7

Editing source files is a terrible idea. All your changes will be lost if you choose to upgrade. Also a lot of developers choose to use external hosted files (e.g. those hosted on bootstrapcdn.com) and can't even be changed. Moreover, when you change a source file for your entire website, you might get unexpected results on other pages. – JerkMan Nov 08 '18 at 11:45

score 0 · Answer 9 · answered Jan 15 '23 at 09:25

0

Utilize data attributes and append the option name to data-bs-. For this case, it should be data-bs-pause="false".

answered Jan 15 '23 at 09:25

Erick

1
1

Is it possible to prevent the Bootstrap carousel pause on mouse hover and continue automatically cycling?

9 Answers9