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.
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
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.
$('.carousel').carousel({
pause: 'none'
})
for Bootstrap v3.3.4
Bootstrap 4 Remove Pause on hover
$('.carousel').carousel({
interval: 2000,
cycle: true,
pause: "null"
})
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
})
In Bootstrap 4 :
data-pause="false"
Eg: <div class="carousel slide" id="carousel" data-pause="false" data-ride="carousel">
This setting prevents the pause.
I have found that there are 2 things on which this cycling and pausing depends.
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))
for Bootstrap v5.1
data-bs-pause="false"
Eg: <div class="carousel slide" data-bs-ride="carousel" data-bs-pause="false">
Utilize data attributes and append the option name to data-bs-
. For this case, it should be data-bs-pause="false"
.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.