CODEWITHSUNDEEP
javascripthovertwitter-bootstrap
Andy Bowskill
Andy Bowskill

Reputation: 1734

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

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.

Upvotes: 57

Views: 86680

Answers (10)

Stéphane POLETTI
Stéphane POLETTI

Reputation: 1

<Carousel pause="false" interval={5000}>
    <Carousel.Item>
        <img className="d-block w-100" src="..." alt="First slide" />
        </Carousel.Item>
        <Carousel.Item>
        <img className="d-block w-100" src="..." alt="Second slide" />
    </Carousel.Item>
</Carousel>

Here is for React

Upvotes: 0

Erick
Erick

Reputation: 1

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

Upvotes: 0

Amirshad
Amirshad

Reputation: 121

for Bootstrap v5.1

data-bs-pause="false"

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

Upvotes: 6

Bijeesh
Bijeesh

Reputation: 21

In Bootstrap 4 :

data-pause="false"

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

This setting prevents the pause.

Upvotes: 2

Nicholas Rotondo
Nicholas Rotondo

Reputation: 55

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

Upvotes: 2

Yogeshwar Chaudhari
Yogeshwar Chaudhari

Reputation: 503

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

  1. When mouse enters (mouseenter - pause sliding)
  2. 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))

Upvotes: 0

Abdul Razak
Abdul Razak

Reputation: 106

Bootstrap 4 Remove Pause on hover

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

Upvotes: 2

wpdevramki
wpdevramki

Reputation: 171

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

for Bootstrap v3.3.4

Upvotes: 7

JCBrown
JCBrown

Reputation: 1092

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.

Upvotes: 66

xcer
xcer

Reputation: 1707

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

Upvotes: 94

Related Questions